jQuery的淘汰賽 - 動態添加和刪除HTML屬性

Question

我有一個HTML元素，看起來像這樣：

<div data-bind="attr: { 'data-text': hasText && textMessage }"></div> 

的Javascript

var viewModel = { 
    hasText: ko.observable(false), 
    textMessage: ko.observable() 
}; 

我想要的，是動態地添加和刪除「數據-text'屬性並使用textMessage屬性的值填充它。

眼下，它輸出hasText && textMessage的布爾結果：

<div data-text='0' /> 

或

<div data-text='1' /> 

我如何動態刪除或添加屬性，並與數據填充呢？

Answer 1

你需要創建一個計算觀察到的屬性，然後綁定，爲您的data-text屬性：

var viewModel = { 
    hasText: ko.observable(false), 
    textMessage: ko.observable(), 
}; 
// the funny syntax is because viewModel is an object literal 
viewModel.textAttr = ko.computed(function(){ 
     // you need to return null or undefinied then KO won't the attribute 
     return viewModel.hasText() ? viewModel.textMessage() : null 
}); 

然後你的綁定將是這樣的：

<div data-bind="attr: { 'data-text': textAttr }">Div</div> 

演示JSFiddle。