1

単一モデルのフェッチ結果を html 形式で表示しようとしています

ここに私のbackbone.js部分があります:

window.Category = Backbone.Model.extend({
    urlRoot : "../myWs/category/"
});

window.CategoryView = Backbone.View.extend({
    el : $('#category_details'),
    template : _.template($('#category-details').html()),
    initialize : function() {
        this.render();
    },
    render : function(eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});

var category = new Category({
    id : "067e6162-3b6f-4ae2-a171-240000000000"
});
var vategoryView = new CategoryView({
    model : category
});

category.fetch();

私がやっていることは次のとおりです。

  1. バックボーン モデル カテゴリを作成する
  2. バックボーン ビューの作成
  3. JSON データ オブジェクトを返す残りの Web サービスからデータを取得します。取得したデータをdiv「#category-details」に表示します。ブラウザーでは、JSON オブジェクトが返されたことを確認できるため、"fetch()" メソッドが機能していることがわかります。

HTMLコードは次のとおりです。

<div id="category_details">details:</div>

<script type="text/template" id="category-details">
<label>Id:</label>
<input id="id" name="id" type="text" disabled />

<label>Name:</label>
<input type="text" id="name" name="name" value="<%= name %>"/>
 </script>

問題は、データが html で表示されないことです。データをhtmlで表示するにはどうすればよいですか?

4

1 に答える 1

2

ビューはモデルの変更を処理しません。これは、model.fetch完了時にビューが再レンダリングされないことを意味します。

モデルから変更イベントをバインドしてみてください。

window.CategoryView = Backbone.View.extend({
    el : $('#category_details'),
    template : _.template($('#category-details').html()),
    initialize : function() {
        this.render();
        this.model.on('change', this.render, this);
    },
    render : function(eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});

そしてデモhttp://jsfiddle.net/Hzm5Y/

Underscore は、未定義の変数をレンダリングするよう求められることを嫌います。おそらく、モデルにデフォルトを追加する必要があります。

window.Category = Backbone.Model.extend({
    urlRoot : "../myWs/category/",
    defaults: {
        name: ''
    }
});
于 2012-12-09T11:59:08.713 に答える