0

バックグラウンド：

テンプレート エンジンとして Handlebars を使用する backbone.js を使用するアプリケーションに変更を加えています。変更イベントが発生した後、現在の DOM 構造に追加される html を作成する必要があります。これは基本的に、モデルに含まれている情報の単なる吐き出しです。この変更は、すでに確立されているアプリケーション構造に適合する必要がありました。

問題：

Handlebars テンプレートとモデルを使用して html を作成する新しいビューを作成しました。次に、そのビューをインスタンス化して render 関数を呼び出し、JQuery を使用して出力を追加します。私が気づいているのは、html がテンプレートに入力する代わりに $el の属性のために渡されるモデルをレンダリングするときです (そうすべきだと思います)。

私が変更しているビュー:

$.hart.TestView = Backbone.View.extend({
    tagName: "li",
    template: Handlebars.compile($('#templateOne').html()),
    initialize: function () {
        this.model.on('change', function () {
            this.createMoreInfoHtml();
        }, this);
    },
    selectSomething: function () {
        this.$el.removeClass('policies');

        this.createMoreInfoHtml(); //function created for new view stuff
    },
    createMoreInfoHtml: function () {
        var id = this.$el.attr('data-id', this.model.get("ID"));
        $('.info').each(function () {
            if ($(this).parent().attr('data-id') == id 
                $(this).remove();
        });

        var view = new $.hart.NewView(this.model, Handlebars.compile($("#NewTemplate").html()));
        $('h1', this.$el).after(view.render().el);
    },
    render: function () {
        ... //render logic
    }
});

作成したビュー:

$.hart.NewView = Backbone.View.extend({
        initialize: function (model, template) {
            this.model = model;
            this.template = template;
        },
        render: function () {
            this.$el.html(this.template({ info: this.model }));
            this.$el.addClass('.info');
            return this;
        }
    });

Json がモデルです:

{
        "PetName":"Asdfasdf", 
        "DateOfBirth":"3/11/2011 12:00:00 AM",      
        "IsSpayNeutered":false, 
        "Sex":"F", 
        "SpeciesID":2, 
        "ID":"ac8a42d2-7fa7-e211-8ef8-000c2964b571"
    }

テンプレート

<script id="NewTemplate" type="text/html">
        <span>Pet Name: </span>
        <span>{{this.PetName}}</span>
    </script>

それでは、質問に進みます。私は何を間違っていますか? テンプレートに入力するのではなく、モデルのプロパティが $el の属性として作成されるのはなぜですか? 誰かが私が探している結果を得る方法を教えてもらえますか?

4

1 に答える 1

1

ジャックが気づいた問題はスキップしましょう。
ビューを作成する方法が間違っています。初期化関数で期待される引数を取得すると機能する可能性がありますが、見られない予期しない動作があります。ビューのコンストラクターを参照してください。

var View = Backbone.View = function(options) {
  this.cid = _.uniqueId('view');
  this._configure(options || {});

_configureそれでは、この方法を見てみましょう。

_configure: function(options) {
  if (this.options) options = _.extend({}, _.result(this, 'options'), options);
  _.extend(this, _.pick(options, viewOptions));

そしてもちろん...

var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];

わかりました... 基本的に、モデルを引数として渡すときは、キー (モデルの属性)optionsを持つオブジェクトを渡します。attributesしかし、このattributesキーは、属性をその要素にバインドするためにビューでも使用されます! したがって、あなたが気づいた行動。

さて、他の間違ったこと。新しい関数を作成するたびにテンプレートをコンパイルしていますが、それをシングルトンとしても使用していません。テンプレートをビューに配置します。

$.hart.NewView = Backbone.View.extend({
  template: Handlebars.compile($("#NewTemplate").html(),

ビューの作成を変更して、すべてが機能するようにします。

new $.hart.NewView({model: this.model});

initializeああ、この役に立たない方法を取り除きます。Backbone が既に行っていることを行っているだけです。

于 2013-04-17T21:43:40.680 に答える