使用knockoutjs編輯選定的項目

我正在製作一個表與knockoutjs。我有一個簡單的表單將數據插入到表中。表格在表格之外。使用knockoutjs編輯選定的項目

我完成了3個任務中的2個。插入&刪除，但我似乎無法得到選擇工作，並與選擇填充表單。

我有一個非常簡單的例子中jsfiddle

我的視圖模型的簡短一部分創建

var viewModel = function (items) { 
    var self = this; 
    self.selectedItem = ko.observable(null); 
    self.items = ko.observableArray(ko.utils.arrayMap(items, function (item) { 
     return new ItemModel(item.itemAmount); 
    })); 
    self.inputItem = new ItemModel(); 
    self.addItem = function() { 

     self.items.push(new ItemModel(self.inputItem.itemAmount())); 
     console.log(ko.toJSON(self.items)); 
     self.inputItem.itemAmount(""); 
    }; 

    self.removeItem = function (item) { 
     self.items.remove(item); 
    }.bind(this); 

    self.editItem = function (item) { 
     self.selectedItem(item); 

    }.bind(this); 


    self.items = ko.observableArray(ko.utils.arrayMap(items, function (item) { 
     return new ItemModel(item.itemAmount); 
    })); 

};

什麼我需要做的，所以當我打電話editItem（）文本框會填充值從桌上？

我敢肯定這是基本的東西，但我想我已經花了很多時間去轉轉試圖自己

來源

2013-08-23 Diver Dan

只是爲了確保我正確地理解你的問題，你要填充輸入字段與所選項目的itemAmount當您單擊「編輯」新功能然後再次單擊「添加」時更新該行？ – Limescale

是@Limescale多數民衆贊成什麼，我想要做:) –

正如一個方面說明：如果你正在使用閉包技術（'var self = this'和使用自我內部方法），應該沒有真正的收益使用'.bind（this）'調用方法本身（儘管它也沒有損壞）。 – Grim

Here's a Fiddle演示了接近你的要求排序。我不確定這是最好的用戶體驗設計，但是這應該演示一種處理更新的方法。

該視圖具有一個編輯模板，它可以在selectedItem填充時顯示。

<!-- ko ifnot: selectedItem --> 
    <input type="number" class="span1" min="1" data-bind="value: inputItem.itemAmount" /> 
    <button class="btn" data-bind="click: addItem">Add</button> 
<!-- /ko --> 
<!-- ko if: selectedItem --> 
    <input type="number" class="span1" min="1" data-bind="value: newItemAmount" /> 
    <button class="btn" data-bind="click: updateItem">Update</button> 
    <button class="btn" data-bind="click: cancelUpdate">Cancel</button> 
<!-- /ko -->

視圖模型有一個名爲updateItem

self.newItemAmount = ko.observable(); 
    self.updateItem = function(){ 
     selectedItem().itemAmount(newItemAmount()); 
     selectedItem(null); 
    };

來源

2013-08-24 00:30:11

使用knockoutjs編輯選定的項目

回答

相關問題