Question

我在使用把手和backbone.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。

把手没有读取backbone.js模型属性

1 个答案: