ClickToEdit按鈕與KnockoutJS

我創建了一個自定義綁定，它將顯示一個錨點，當點擊變爲文本框時。一旦用戶輸入一個值並敲擊回車鍵，該值將被推送到傳遞給綁定的observableArray中。ClickToEdit按鈕與KnockoutJS

大部分的結合物從賴安Niemeyers例如採取的 - 發現here

HTML

<div data-bind="clickToEdit: { data: items, buttonText: 'New Item' }"></div>

結合

ko.bindingHandlers.clickToEdit = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) { 
     var options = valueAccessor() || {}; 

     var editing = ko.observable(false); 
     var newValue = ko.observable(); 

     var button = $('<a class="btn btn-mini" href="#">' + options.buttonText + '</a>').prepend('<span class="icon-plus"></span>').appendTo(element)[0]; 
     var input = $('<input type="text">').appendTo(element)[0]; 

     ko.applyBindingsToNode(button, { 
      hidden: editing, 
      click: function() { 
       editing(true); 
      } 
     }); 

     ko.applyBindingsToNode(input, { 
      value: newValue, 
      visible: editing, 
      hasFocus: editing, 
      //valueUpdate: 'afterkeydown', 
      onEnter: function(data) { 
       debugger; 
       options.data.push(data); 
       editing(false); 
      } 
     }); 
    } 
};

的問題是，在功能綁定到onEnter綁定數據參數總是未定義的，所以新值永遠不會被推入數組中。

請參閱我的fiddle一個完整的例子

來源

2013-03-22 bflemi3

兩件事情，可以幫助：

的applyBindingsToNode調用接受第三個參數，你可以提供的上下文。在我的一些示例中，上下文無關緊要，因爲它直接寫入可觀察對象，並且不需要數據。因此，您可以將context（或viewModel）作爲您的第二個applyBindingsToNode調用的第三個參數。
如果我明白你想要做什麼，那麼我會認爲你可以做一些事情，如：options.data.push(new Item(newValue());，而不需要擔心上下文/數據（這將是整個視圖模型，就像你處於頂級範圍）。

例子：http://jsfiddle.net/rniemeyer/Pmns4/

來源

2013-03-22 14:00:30

完美，你的第二個項目符號是方形的。謝謝 – bflemi3 2013-03-22 14:07:48

通過執行'new Item（newValue（））'，綁定現在與模型耦合。這不是不好的做法嗎？會不會有一種更好的方式，以便綁定對模型一無所知？ – bflemi3 2013-03-22 14:52:14

我可以通過傳遞一個新的Item來添加一個顯而易見的方法，也許像這樣...'data-bind =「clickToEdit：{data：items，newItem：new Item（{}），buttonText ：'New Item'}'。雖然 – bflemi3 2013-03-22 14:55:14

ClickToEdit按鈕與KnockoutJS

回答

相關問題