Question

我正在使用backbone.js，我正在努力了解我是做错了什么，或者这是骨干应该如何表现。

我正在建一张桌子，因为我有两个模板第一个是与问题无关的所有容器和<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;
    }
});

这是菜单项的模板：

  <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在options参数中接受名为attributes的选项，并将其复制到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);
}

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

1 个答案: