2

私は backbone.js が初めてで、データをテンプレートに送信するのに少し助けが必要です。フェッチを伴うモデルとコレクションを使用しています。コードは次のとおりです。

(function($) {

var UserModel = Backbone.Model.extend({
    urlRoot : '/users',
    defaults : {
        name : '',
        email : ''
    },

    initialize : function() {
        _.bindAll(this);
        this.fetch();
    },
    parse : function(res) {
        return JSON.stringify(res);
    },

});

var users_coll = Backbone.Collection.extend({
    //model: UserModel
    initialize : function() {
        var u = new UserModel();
        this.model = u;
    }
});

var displayView = Backbone.View.extend({

    initialize : function() {

        this.collection = new users_coll();
        //_.each(this.collection.models, alert);
        //console.log(this.collection);
        //alert(JSON.stringify(this.collection.models));

        this.render();
    },
    render : function() {
        var tmpl = _.template($("#data-display-tpl").html());
        this.$el.html(tmpl);

    }
});

var view = new displayView({
    el : $("#data-display")
});

     })(jQuery);

モデル部分までは正常に動作しています。モデルの解析関数では、console.log() を使用しましたが、すべて問題ないようです。適切にフォーマットされたjsonを取得し、フェッチも正常に機能します。

ただし、私のコレクションでは、console.log(user_coll.models) を試しても何も得られません。私はおそらく本当に小さな何かを見逃していると思います。よくわからないのですが、物事の流れがすべて間違っているのかもしれません。

4

2 に答える 2

2

私はあなたのコードを少し修正して、ポイントラフを取得しようとしました...それがいくつかの基本を明確にするのに役立つことを願っています。

私も提供された例を試しませんでしたが、理論的にはうまくいくはずです;）

これが彼の例がどのように行われるべきかです...例えばTwitterアプリを想像してみましょう。Twitterアプリには、システム内の1人のユーザーを表すモデルが1つだけあります。それがUserModelです

var UserModel = Backbone.Model.extend({
    urlRoot : '/user',   // this is just for modifying one specific user
    defaults : {
        name : '',
        email : ''
    },
    initialize : function() {
        _.bindAll(this);
        //this.fetch();    // WRONG: This call was "wrong" here
                           //        fetch() should be done on Collection not model 
    },
    parse : function(res) {
        return JSON.stringify(res);
    },
});

これで、Twitterに多数のユーザーリストを表示できます。つまり、2つのリストがあります。1つのリストには友達ユーザーがいて、他の家族ユーザーには

var UsersFriendsCollection = Backbone.Collection.extend({
    model: UserModel              // you tell Collection what type ob models it contains
    url: '/users/friends',
    initialize : function() {
        // jabadaba whatever you need here
    }
});

var UsersFamilyCollection = Backbone.Collection.extend({
    model: UserModel              // you tell Collection what type ob models it contains
    url: '/users/family',
    initialize : function() {
        // jabadaba whatever you need here
    }
});

..。

var displayView = Backbone.View.extend({
    initialize : function() {
        this.collection = new UsersFriendsCollection();
        this.collection.fetch();       // so you call fetch() on Collection, not Model

        console.log(this.collection);  // this should be populated now

        //_.each(this.collection.models, alert);
        //alert(JSON.stringify(this.collection.models));

        this.render();
    },
    render : function() {
        // collection data is avail. in templating engine for iteration now
        var tmpl = _.template($( "#data-display-tpl" ).html(), this.collection);
        this.$el.html(tmpl);
    }
});
于 2013-01-04T15:57:14.943 に答える
1

コレクションのmodel属性は、コレクションに含まれるモデルのタイプを指定するためのものであり、指定されている場合は、コレクションにrawオブジェクトの配列を渡すことができ、それらを追加および作成します。ドキュメントから

このプロパティをオーバーライドして、コレクションに含まれるモデルクラスを指定します。定義されている場合、生の属性オブジェクト（および配列）を渡して追加、作成、およびリセットでき、属性は適切なタイプのモデルに変換されます

だからあなたのコードにあなたが持っているとき

  var u = new UserModel();
  this.model = u;

実際にモデルをコレクションに追加しているわけではありません。代わりに、コレクションのaddメソッドまたはfetchメソッドを使用できます。

于 2013-01-04T15:09:06.473 に答える