1

今日は私の最初の日なbackbone.jsので、ここで気楽に行ってください。に入力する、、、viewおよびcollectionがあります。 modelselect

select罰金にハードコードされ たを入力できarrayます。ただし、既存のAPIを使用しているため、最初に応答を解析する必要があります。これも問題なく動作するようです。

私が知らないのは、新しく返された結果/モデルをレンダリングするために何が変更されたかを誰に伝えるかです...それが役に立たなかった場合、コードはより意味をなすはずです。

var UserGroup = Backbone.Model.extend();

var UserGroups = Backbone.Collection.extend({

    initialize:function(){
        this.fetch();
    },

    model: UserGroup,

    url: "http://myAPI/getUserGroups",

    parse: function(json){

        return json["GetUserGroups"]["Results"];
    }

});

var GroupSelectView = Backbone.View.extend({

    el: $("select"),

    initialize: function() {
        var that = this;

        this.collection = new UserGroups();

        this.render();

    },

    render: function(){
        _.each(this.collection.models, function(group){
            $("<option/>", { value: group.get("Id"), text: group.get("Name")} ).appendTo(this.el)
        }, this);
    },
});

var groupSelectView = new GroupSelectView();

あなたは何を考えますか？私はそれを手に入れていますか？

4

3 に答える 3

3

もう少し柔軟にするためにreset、addイベントを聞くことができます。

コレクションはサーバー（またはローカル）から収集する場合ですが、resetモデルを作成する場合、またはオプションを使用する場合は、代わりに各モデルの追加イベントが発生します。fetchaddfetchadd

Backbone.js：fetch

これは機能するはずです：

var GroupSelectView = Backbone.View.extend({

    initialize: function() {
        var that = this;

        this.setElement($("select"));
        this.collection = new UserGroups();

        // listen to add and reset events but handle them differently
        // fired on collection.add(model) and collection.fetch({add: true})
        this.collection.on("add", this.renderItem, this);
        // fired on collection.fetch()
        this.collection.on("reset", this.render, this);

    },

    render: function(){
        // backbone collections already come with some underscore methods built in
        this.collection.each(this.renderItem, this);
    },

    renderItem: function(group) {
        this.$el.append($("<option/>", {
            value: group.get("Id"),
            text: group.get("Name")})
        );
    }
});
于 2012-10-09T13:06:05.023 に答える
1

あなたは休閑をすることができます...

var GroupSelectView = Backbone.View.extend({

    el: $("select"),

    initialize: function() {
        var that = this;

        this.collection = new UserGroups();
        this.collection.on( 'change', this.render, this );


    //  You could try this too, 1 is for 1 item is added, the other, when all items are changed
    //  this.postCollection.on('add', this.addOne, this);
    //  this.postCollection.on('reset', this.addAll, this);

        this.render();

    },

    render: function(){
        _.each(this.collection.models, function(group){
            $("<option/>", { value: group.get("Id"), text: group.get("Name")} ).appendTo(this.el)
        }, this);
    },
});
于 2012-10-09T12:54:58.303 に答える
0

Backbone.Eventsを使用して、変更をパブリッシュ/サブスクライブできます。詳細については、リンクをたどってください。

モデルとコレクションには、モデルの属性が変更される（'change'）やコレクションのモデルがフェッチされる（'reset'）などの一般的なユースケースで発生するイベントが組み込まれています。

変更をトリガーするには（公開）：

myObject.trigger（'event'）;

変更をサブスクライブするには（サブスクライバー）

myObject.on('event',myCallback,context);

myCallbackをビューのrenderメソッドに設定します。

バックボーンイベントの詳細については、この投稿を確認してください。

于 2012-10-09T13:01:22.903 に答える