为什么backbone.js中的标记视图将所有模型属性呈现为自身

Question

我正在使用backbone.js,我试图了解我是否做错了,或者这是骨干应该如何表现.

我正在建一张桌子,因为我有2个模板,第一个是所有<thead>与问题无关的容器和信息.

然后我将项目集合呈现为行.有了这个观点:

   MYAPP.Menu.ItemView = Backbone.View.extend({
    tagName: 'tr',      
    template: template('menu-item'),
    initialize : function(modelItem) {
    this.model = modelItem;
    this.model.on('all', this.render, this);
    },
    render : function() {
        var html = this.template(this.model.toJSON());
        this.$el.html(html);
        return this;
    }
});

这是menu-item的模板:

  <script type="text/x-mustache-template" id="menu-item-template">
            <td>{{title}}</td>
            <td>{{description}}</td>
            <td>{{price}}</td>
            <td>{{status}}</td>
            <td></td>
    </script>

我在<tbody>标签内输出的输出是这样的:

     <tr id="1" title="title1" price="price1">
            <td>title1</td>
            <td></td>
            <td>price1</td>
            <td></td>
            <td></td>
    </tr>

等等. 所以这就是问题所在

为什么<tr>标签中存储的所有数据都是属性？我不想那样.为什么会这样？

谢谢.

Answer 1

你最有可能像这样初始化你的观点:

new MYAPP.Menu.ItemView(someModel);

这是不正确的,正确的方法是options使用密钥在对象中传递模型model:

new MYAPP.Menu.ItemView({model:someModel});

将模型属性设置为元素的属性这一事实在命名方面只是一个不幸的巧合.Backbone.Model将其值内部存储在名为的属性中attributes.Backbone.View另一方面,接受attributesoptions参数中调用的选项,并将其复制到to View.attributes,然后将这些选项设置为根元素上的属性.

有被自动复制到视图的一些特殊性能:id,cssClass, el,model和collection,仅举几例.因为模型只是一个对象,所以调用new View(model)等同于new View({id:id, attributes:attributes, ...}),这会导致你所看到的奇怪效果.

所以看看你的构造函数代码,它应该是这样的:

initialize : function(options) {
   this.model = options.model;
   this.model.on('all', this.render, this);
}

但是因为Backbone负责为您设置一些View选项,包括model,您严格来说甚至不需要设置this.model:

initialize : function(options) {
   this.model.on('all', this.render, this);
}