Question

请参阅以下fiddle。

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方法来设置它们。）

我做错了什么？

Answer 1

要获取与模板一起使用的对象，您需要调用模型的toJSON方法。

例如

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

如果您在Firebug中检查其中一个模型（或只是将其输出到控制台），您会注意到除了您指定的属性之外还有更多属性，并且您指定的值实际上包含在属性 attributes ，调用toJSON会返回一个对象，其中包含您指定的模型“values”。

backbone.js没有获取模型上下文

1 个答案: