-1

Modelaと aを定義しCollectionました。データベースには既にレコードがあるため、ページの読み込み時にアプリケーションでこれらすべてのレコードを表示したいと考えています。

を使用してみBackbone.syncましたが、Chrome デバッグ モードで空のコレクションが表示されます。

私の Backbone.js コード:

http://jsfiddle.net/GhaPF/15/ (テンプレートの依存関係のために、いくつかのコードを削除する必要がありました)。

$(document).ready(function() {

    var Item = Backbone.Model.extend({
        defaults: { "date": "",
                    "text": "default text"
                },
        initialize: function() {      // STEP 3
            var dateString = giveMeDate();
            this.set("date", dateString);
        },
        urlRoot : './items'
    });

    var ItemList = Backbone.Collection.extend({
        model: Item,
        url: './items/',
        initialize: function() {
            this.fetch();
        }
    });


   //************ VIEW ********************************
    var ItemListView1 = Backbone.View.extend({
        el: 'body',
        initialize: function(myitemList) {
            this.itemlist = myitemList;
            this.itemlist.bind('add', this.addOneItem, this);
            this.render();
        },
        addOneItem: function() {
            this.render();
        },
        render: function() {                // STEP 5       this is called because add() is bound to this.render (in initialization of this View)
            text = this.itemlist.toJSON();
            string = JSON.stringify(text);
            $("#view1").html('');
            $.tmpl("itemTemplate", text).appendTo("#view1");
            return this;
        },
        events: {
            "keypress #new-item":  "createOnEnter"    // STEP 1
        },
        createOnEnter: function(e) {
          if (e.keyCode != 13) return;
          if (!$("#new-item").val()) return;
          this.itemlist.create({"text": $("#new-item").val()});   // STEP 2
          $("#new-item").val('');
        }
    });


    $("#new-item").focus();
    var itemlist = new ItemList();
    Backbone.sync("read", itemlist);
    var myitemListView = new ItemListView1(itemlist);

Backbone.sync 後のコレクションに表示される内容は次のとおりです。

d
_byCid: Object
_byId: Object
length: 0
models: Array[0]
__proto__: x
4

1 に答える 1

3

  1. おそらく、sync を直接呼び出すべきではありません。そのメソッドは、他の sync メソッド (localStorage、IndexedDB、couchdb などをサポートするため) で上書きされる可能性があるためです。同期は「ストレージ ドライバー」に似ています。

  2. コレクションを作成するには、fetch を呼び出す必要があります。したがって、コードでは、次のようになります。

    itemlist.fetch({success: function (models) {
   console.log("got", models);
});
var myitemListView = new ItemListView1({collection: itemList});

  3. ページの読み込み直後にコレクションに非同期フェッチを追加するのは「スタイルが悪い」と見なされます。通常、ページと一緒に送信されるコードを入力し、コレクションへの後続の更新にのみフェッチを使用する必要があります。

上記のコード例で、どうしても非同期フェッチを行う場合は、コレクションが実際に読み込まれるまでビューの作成を遅らせて、リストが空からいっぱいになったときに不要なフラッシュが発生しないようにすることをお勧めします (ビューはコレクションにバインドされています)。フェッチが完了するとリセットされます)。

于 2012-09-07T13:07:30.307 に答える