车把不读取主干.js 模型属性

Question

我在显示带有把手和主干.js 的模型属性时遇到了一些奇怪的困难 这是代码。

MYAPP.Menu = {};
MYAPP.Menu.Item = Backbone.Model.extend({
urlRoot : 'menuItem',
        defaults: {
        title: "Menu Item Title default",
        price: "menu item price default"
        },
});

MYAPP.Menu.Items = Backbone.Collection.extend({
    model: MYAPP.Menu.Item,
    url: 'menuItems'
});

MYAPP.Menu.ItemView = Backbone.View.extend({

    initialize : function() {
        this.model = new MYAPP.Menu.Item();
        this.model.on('all', this.render, this);
    },
    render : function() {
        var source = $("#index-template").html();
        var template = Handlebars.compile(source);
        console.debug(this.model.get("title")); <- shows default value
        var html = template(this.model);
        console.debug(html);
        this.$el.html(html);
        return this;
    }
});

还有模板：

  <script type="text/x-mustache-template" id="index-template">
        <div class="entry">
         <h1>{{title}}</h1>
          <div class="body">
            {{price}}
          </div>
        </div>          
    </script>

输出只是没有任何数据的标签。控制台中也没有错误。 有什么想法吗？

我有一个解决方案：

当我使用时

  initialize : function() {
        this.title = "Menu Item Title default";
        this.price =  "menu item price default";
    },

一切正常。有人对此有解释吗

Answer 1

var html = template(this.model);

应该是

var html = template(this.model.toJSON());

基本上，this.model 有一个attributes 属性，用于存储您可以使用this.model.get() 检索并使用this.model.set() 设置的所有信息。这些属性未附加到基本模型。

当你有以下代码时

initialize : function() {
    this.title = "Menu Item Title default";  // BAD!
    this.price =  "menu item price default"; // BAD!
}

您正在将属性附加到基本模型。这是对 Backbone 的错误使用。如果你之后尝试做this.model.get("title")，那就是undefined。