1

我对 Backbone 还很陌生，我正在研究一个对 Backbone 来说可能并不理想的项目，但无论如何我都在尝试！我没有使用 RESTful API，所以我的所有数据都是在页面加载时获取的，就是这样，它根本不会更新。数据作为单个 JSON 块发送。

我已经设置了一个新模型CookingItem，它为 JSON 中的每个项目创建，然后添加到CookingItemList集合中，这很好。但是，我需要在某处存储有关数据集的信息，因此我创建了另一个“属性模型”来存储此信息（状态信息、启动项等）。这个属性模型也将有几个操作数据的方法。然后从视图中调用这些方法（这样可以吗？）。

这工作正常，但我只是想确定我正在做的事情被认为是一种很好的做事方式。我确定可能有更好的方法来处理Properties模型？

// Models
var CookingItem = Backbone.Model.extend(),

CookingProperties = Backbone.Model.extend({
    defaults:{
        startItem: 'anything',
        currentItems:[]
    },
    setStartItem:function (val) {
        // Code Here to edit this models properties
    },
    addRemoveItem:function (val) {
        // Code Here to edit this models properties
    }
}),

// Collection
CookingItemList = Backbone.Collection.extend({
    model:CookingItem,
    url:function () {
        return "json.js";
    }
}),

// View
CookingView = Backbone.View.extend({
    el:'.page',
    events:{
        // Buttons in the UI
        'click .link1':function () {
            this.cookingProperties.addRemoveItem('item name');
        },
        'click .link2':function () {
            this.cookingProperties.addRemoveItem('item name');
        }
    },
    initialize:function () {
        // Scope
        var _this = this;
        // Instantiate
        this.cookingItemList = new CookingItemList();  // PlayListItems Collection.
        this.cookingProperties = new CookingProperties(); // Properties Model.
        // Bindings
        this.cookingProperties.on('change:startItem', function () {
            _this.customMethod1();
            _this.customMethod2();
        });
        // Render the view
        this.render();
    },
    render:function () {
        var _this = this;
        this.cookingItemList.fetch({
            success:function () {
                _this.cookingProperties.setStartItem('item');
                _this.customMethod1();
            }
        });
        return this;
    },
    customMethod1:function () {
        // Do something
    },
    customMethod2:function () {
        // Do something
    }
}),

// Start
cookingView = new CookingView({
    collection:CookingItemList
});
4

0 回答 0