2

次のフィドルをご覧ください。

HTML

<script id="person" type="text/x-handlebars-template">        
    <div>Title : {{title}} </div>  
    <div>First Name : {{firstname}}</div>
    <div>Last Name : {{lastname}}</div>                      
</script>
<div id="people"></div>

JS

(function ($) {
       var personTemplate= Handlebars.compile($("#person").html());

       var Person= Backbone.Model.extend({
           title: null,
           firstname : "",
           lastname : ""
        });

        PersonView = Backbone.View.extend({
            tagName: "div",
            template:  personTemplate,
            render: function () {
                $(this.el).html(this.template(this.model));
                return this;
            }
        });

        $(document).ready(function () {
        var AppView = Backbone.View.extend({
            initialize: function () {              
                var passView = new PersonView (
                    { model: new Person({ title: "Mr",
                                          firstname : "John",
                                          lastname : "Smith"})
                    });

                $('#people').append(passView.render().el.outerHTML);
            }
        });

        var App = new AppView();
    });
})(jQuery);

基本モードとビューを作成しましたが、ビューのパラメーターがテンプレートによって取得されていません。人物モデルに直接値を設定すると、それらが検出されます。しかし、モードの新しいインスタンスを介してそれらを設定した場合（または、initメソッドを使用してそれらを.set（）した場合でもそうではありません。

私は何が間違っているのですか？

4

1 に答える 1

1

テンプレートで使用するオブジェクトを取得するには、モデルのtoJSONメソッドを呼び出す必要があります。

例えば

PersonView = Backbone.View.extend({
            tagName: "div",
            template:  personTemplate,
            render: function () {
                $(this.el).html(this.template(this.model.toJSON()));
                return this;
            }
        });

Firebugでモデルの1つを検査する（または単にコンソールに出力する）と、指定した属性よりもはるかに多くの属性があり、指定した値が実際にはプロパティ属性に含まれていることがわかります。呼び出しは、指定したモデルの「値」toJSONを持つオブジェクトを返します。

于 2012-11-21T15:38:15.017 に答える