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 中检查您的模型之一（或只是将其输出到控制台），您会注意到有更多的属性，而不是您指定的那些，并且您指定的值实际上包含在属性attributes下，调用toJSON返回一个具有您指定的模型“值”的对象。

于 2012-11-21T15:38:15.017 回答