創建2路與觀察到的插件自定義綁定

對這個問題的蛛絲馬跡似乎都很難找到，我開始覺得它必須是明顯的（和我想的東西），沒用，還是不可能的：創建2路與觀察到的插件自定義綁定

我使用observables（ko.observables（））獲得雙向綁定的東西。但是，所有這個括號是一個真正的痛苦。所以當我使用迪朗達爾，我雖然我給了observable插件一試：http://durandaljs.com/documentation/Binding-Plain-Javascript-Objects.html

（備案，我也試過這一個：http://blog.stevensanderson.com/2013/05/20/knockout-es5-a-plugin-to-simplify-your-syntax/）

兩者都與基因敲除的value結合工作正常。

我的問題是我有我的應用程序的多個基因敲除自定義綁定，我不知道如何更新這些自定義綁定中不是ko.observable（）的可觀察屬性。

在我結合我通常會做到這一點：

ko.bindingHandlers.testBinding = { 
    init: function(element, valueAccessor) { 
     var myObservable = valueAccessor(); 
     // here I could detect if it's an observable or a POJO 
     // ... how to know if it's a property ??? 

     $(element).blur(function() { 

      // ... how to write to myObservable if it's a writable property 
      // ... and not a ko.observable() ??? 
      myObservable($(element).val()); 

     }); 

    }, 
    update: function(element, valueAccessor) { 
     $(element).val(ko.unwrap(valueAccessor())); 
    } 
};

然而，隨着觀測，我明白我需要的屬性的參考基礎對象和名執行更新。（我可以得到前者，但如何讓後者？）

我進去看了value淘汰賽的結合，試圖瞭解，但沒有更多的成功......

會有人有一個簡單的例子這個可觀察插件的外觀如何？任何線索將不勝感激。

感謝

來源

2014-04-01 David

「我不明白你是如何更新不是一個ko.observable（）的可觀察屬性」 - 你能澄清這一點嗎？這很混亂。 – xdumaine

使用ES5，您可以在具有getter/setter（因此'可觀察'）的JS對象上創建屬性。他們不是ko.observable（），但仍然有能力在沒有圓括號的情況下進行雙向綁定。但在一個自定義綁定中，我沒有得到如何寫入這樣的屬性。（除了在自定義綁定中，它在其他地方起作用） – David

採用淘汰賽的preprocess feature，你的綁定可以添加到寫，直接財產的方法。這裏是你如何能做到這一點：

ko.bindingHandlers.testBinding = { 
    preprocess: function(value, name, addBindingCallback) { 
     addBindingCallback('testBindingWriter', 'function(v){' + value + ' = v}'); 
     return value; 
    }, 
    init: function(element, valueAccessor, allBindings) { 
     var value = valueAccessor(); 
     $(element).blur(function() { 
      if (ko.isObservable(value)) { 
       value($(element).val()); 
      } else { 
       allBindings.get('testBindingWriter')($(element).val()); 
      } 
     }); 
    }, 
    update: function(element, valueAccessor) { 
     $(element).val(ko.unwrap(valueAccessor())); 
    } 
};

例子：http://jsfiddle.net/mbest/U7Jeg/

來源

2014-04-01 20:36:38

如果你想要做的就是讓你可以用預處理將其存儲在這樣的結合處理的屬性名稱：

propertyName: null, 
preprocess: (value) => { 
     this.propertyName = value; 
     return value; 
},

您現在可以訪問屬性在你的初始化函數，並與結合的BindingContext其設定值：

init: (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) => { 
     $(element).blur(() => { 
      bindingContext.$data[this.propertyName] = $(element).val(); 
     }) 
}

注意：我使用上面的箭頭函數來保留「this」的含義。如果這不是一個選項，你可以這樣做：

init: (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) => { 
     thisHandler = this; 
     $(element).blur(function() { 
      bindingContext.$data[thisHandler.propertyName] = $(element).val(); 
     }) 
}

來源

2015-11-19 13:18:40 thomasbyers

創建2路與觀察到的插件自定義綁定

回答

相關問題