javascript - 四个 Backbone.js 模型问题

Question

我正在使用 Backbone.js 来跟踪可视化应用程序中的状态。

该模型具有如下属性:

indicatorX : "income"
indicatorY : "emissions"
indicatorXScale : "lin"
indicatorYScale : "log"
year : 1980
layout : {leftPanel : {[...]}, rightPanel : {[...]}}  

---

<强>1。在 Backbone.js 模型中处理“依赖属性”的好方法是什么？
例如，当更改 indicatorX 属性时，我还希望模型更新 indicatorXScale 属性。

<强>2。如何处理“挥之不去” 模型属性？示例:

模型包含这个:

indicatorX : "income"  
indicatorXScale : "log"

如果在模型上只设置了indicatorX，scale应该设置为默认值:

model.set( {indicatorX : "emissions"} )
if("indicatorX" in changedAttrs){
    indicatorXScale = dataSource[indicatorX].defaultScale
}

但是，如果用户想要覆盖默认比例(在“排放”指标的情况下为“lin”)怎么办？

model.set( {indicatorX : "emissions", indicatorXScale : log} )

由于模型属性 indicatorXScale 已设置为“log”，因此不会记录更改的属性。那么我如何确保在这种情况下不加载 defaultScale - 而是传递给模型的那个？

<强>3。让模型使用一个额外的属性“action”来描述模型的变化是个好主意吗？
通过这种方式， Controller 可以监听一个属性，而不是为属性组合指定处理程序。这些是备选方案:

Alt 1. Controller 具有特定属性的处理程序:

this.model.bind("change:year", this.render);
this.model.bind("change:layout", this.updateLayout);  

Alt 2. Controller 具有模型更改的处理程序，并且 render() 确定要做什么:

this.model.bind("change", this.render);
render() {
   var changedAttributes = this.model.changedAttributes
   if (a,b && c in changedAttributes) x()
   if (a,d in changedAttributes) y()
}

Alt 3. 让模型描述属性变化的组合意味着什么:

this.model.bind("change:action", this.render);
render() {
   var changedAttributes = this.model.changedAttributes
   var action = this.model.get("action")
   if (action == gui_changeIndicator) x()
   if (action == gui_opacity) y()
}

<强>4。在 Backbone.js 模型中使用对象作为属性时，是否有任何需要注意的陷阱？
例如，对我试图保留在模型中的布局状态执行 isEqual 是否很昂贵？另外，在设置模型时，对象是通过引用传递的，所以最好是一个新的对象来进行比较？

Answer 1

1。在 Backbone.js 模型中处理“依赖属性”的好方法是什么？例如，当更改 indicatorX 属性时，我还希望模型更新 indicatorXScale 属性。

恕我直言，扩展模型并绑定(bind)到更改事件中。例如:

MyModel = Backbone.Model.extend({
    initialize: function() {
        this.bind('change:width', this.updateArea);
        this.bind('change:height', this.updateArea);
        this.updateArea();
    },
    updateArea: function () {
        this.area =  this.get('width') * this.get('height');
    }
});

var model = new MyModel({height: 10, width: 10});
console.log(model.area); //100
model.set({width: 15});
console.log(model.area); //150

这是非常基本的，但是更改事件是按键调用的，并且作为一个整体“更改”..因此您可以绑定(bind)到某些更改并根据需要进行更新。如果它是一个大型模型，有很多间歇性更新的键，这绝对是可行的方法。如果它只是那两个键.. 好吧.. 您可能只绑定(bind)到常规的 ol' change 事件一次。

2。如何处理“挥之不去”的模型属性？

覆盖设置方法并添加一些您自己的代码。示例:

MyModel = Backbone.Model.extend({
    constructor: function (obj) {
        this.touched = {}; //Set before the prototype constructor for anything being set
        Backbone.Model.prototype.constructor.call(this, obj);
        //set after for only things that the program has updated.
        return this;
    },
    set: function(attributes, options) {
        if(attributes.keyIWantToListenFor !== undefined && !this.touched.keyIWantToListenFor) {
            console.log("keyIWantToListenFor was set, let's fire off the right methods");
            this.touched.keyIWantToListenFor = true;
        }
        Backbone.Model.prototype.set.call(this, attributes, options);
        return this;
    }
});

var model = new MyModel({height: 10, width: 10});
model.set({keyIWantToListenFor: 15});

这在模型上保持绝对的“是否设置了 key ”。它可能不够具体，无法满足您的需求，但它确实有效..所以请随意使用和破解它。

3。让模型使用一个额外的属性“action”来描述模型的变化是不是一个好主意？

Backbone 人员设置它的方式是，如您所知，change:key 专门用于特定键上的更改事件。通过依赖 change:action，您有点像是在代码中添加了“明白了!”。我看不出其他两种方法比第一种方法有何优势，尤其是考虑到现在您已将逻辑放入事件监听器以确定触发什么……而不是直接将该代码附加到适当的监听器。如果有选择，我会坚持使用第一个 - 很明显“此 key 已更新，因此我们将执行 X”。不是“有什么东西更新了，让我们去弄清楚它是什么!”并且可能必须经过十几个 if 语句或开关。

4。在 Backbone.js 模型中使用对象作为属性时，是否有任何需要注意的陷阱？

好吧，isEqual 执行深度比较.. 因此您冒着执行所有比较代码的风险以及递归的风险。所以，是的，如果你多次这样做，那肯定是一个陷阱。

通过引用的对象肯定是个问题 - 我在墙上有一个漂亮的小洞，我已经把头伸进去几次想知道为什么有些东西在完全不相关的地方发生了变化......哦等等......为了稍微补救这个问题，您可以重写 get 方法，在它返回对象的情况下，返回类似 $.extend(true, {}, this.get(key)); 的内容

此外，您实际上并不知道基于普通 Backbone 的对象到底发生了什么变化。所以，如果你在更改上做很多“事情”(重建 View 等)，你可能会遇到性能问题，即使你所做的只是向该对象添加另一个属性但事实并非如此用于上述任何更改。 (即 set({layout: layoutObj}) 与 set({layoutPageTitle: 'blah'}) 可能只会更新标题......而不是导致整个 View 重新加载)。

否则，至少在我正在开发的应用程序中，我们在 Backbone 中的对象方面没有遇到真正的问题。它们同步得相当好，它肯定比 .get('layout.leftPanel[0]') 更好，并且有一些神奇的翻译来使它起作用。请注意引用部分。

希望至少能有所帮助!