Question

今天是我backbone.js的第一天，所以在这里轻松一下。我有一个view，一个collection和一个model来填充select。

我可以使用硬编码 select来填充array罚款。但是我使用的是现有的API，我需要先解析响应。这似乎也可行。

我不知道的是告诉我们为了呈现我新返回的结果/模型而改变了什么...代码应该更有意义如果这没有帮助。< / p>

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();

你觉得怎么样？我明白了吗？

Answer 1

为了更加灵活，您可以倾听reset和add个事件。

当您reset来自服务器（或本地），但是fetch模型或add使用fetch选项时，该集合为add，而是触发了每个模型的添加事件。

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")})
        );
    }
});

Answer 2

您可以执行以下操作...

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);
    },
});

Answer 3

您可以使用Backbone.Events发布/订阅更改。请点击链接获取更多信息。

模型和集合具有针对常见用例触发的内置事件，例如模型的属性变更（'更改'）和集合的模型获取（'重置'）。

触发更改（发布）：

myObject.trigger（ '事件'）;

订阅更改（订阅者）

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

将myCallback设置为视图的渲染方法。

查看this post以获取有关Backbone Events的更多详细信息。

Backbone，解析JSON，然后如何触发渲染？

3 个答案: