Backbone.js和重構正確

我是新來的骨幹，所以原諒我，如果這是顯而易見的。我寫了一個函數，根據其位置將與切換開關關聯的值更改爲true或false。我在兩個不同的視圖中使用了這個代碼，並想重構它。Backbone.js和重構正確

我創建了一個Utils對象，並將該函數作爲方法附加到該對象。然後我將Utils導入到兩個視圖中。下面是一段代碼，因爲我現在可以正常工作：

var AddView = AbstractView.extend({ 
    template: "path/to/template.html", 
    events: { 
     "change .toggleBoolean" : "temp" 
    }, 
    temp: function(e){ 
     Utils.toggleValue.call(this, e); 
    }, ...

這在兩個地方都能正常工作。但是，我希望用temp方法替換事件散列中的「temp」。任何方向如何正確地做到這一點將不勝感激。

來源

2016-02-02 Oliver Bradley

你可以簡單地這樣做：

var AddView = AbstractView.extend({ 
    template: "path/to/template.html", 
    events: { 
    "change .toggleBoolean" : Utils.toggleValue 
    },

Utils.toggleValue將在視圖的上下文中調用。

這裏是與事件對象涉及的主幹代碼的一部分：

for (var key in events) { 
    var method = events[key]; 
    if (!_.isFunction(method)) method = this[method]; 
    if (!method) continue; 
    var match = key.match(delegateEventSplitter); 
    this.delegate(match[1], match[2], _.bind(method, this)); 
//-------------------------------------^ context is handled here 
}

它檢查值是否是一個函數，並結合處理函數的上下文來查看

來源

2016-02-02 06:42:16

你可以只是使用參考而不是字符串

var Myview = Backbone.View.extend({ 
    events: { 
    'click p': Utils.action 
    }, 
});

plnkr

或者，如果你想混UTIL方法到視圖類，而不是依靠代表團，你可以做

var Myview = Backbone.View.extend({ 
    events: { 
    'click p': 'action' 
    }, 
}); 
Myview.prototype.action = Utils.action;

plnkr

以上將保留背景下，你可以在plunker見。

如果您打算以這種方式開始拉出更多邏輯，我的首選方法是查看提供mixin功能的插件。 Marionette具有許多其他有用的功能，用於在視圖之間共享行爲。還有其他幾種方法，您可以通過Google搜索「Backbone mixin」進行研究。

來源

2016-02-02 06:52:48 ivarni

感謝您的鏈接和敘述。 – Drew

Backbone.js和重構正確

回答

相關問題