1

我在使用车把和骨干网显示模型属性时遇到了一些奇怪的困难。这里是代码。

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";
    },

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

4

1 回答 1

4 
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。

于 2013-01-15T20:07:20.553 回答