1

ハンドルバーと 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";
    },

すべて正常に動作します。誰かがこれについて説明していますか

4

1 に答える 1

4 
var html = template(this.model);

する必要があります

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

基本的に、を使用して取得および設定できるすべての情報を格納this.modelするプロパティがあります。これらのプロパティは、基本モデルには添付されていません。attributesthis.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 に答える