用knockout.js提交文本框的值

Question

我試圖將文本框中的值提交到將以表格格式顯示的數組中。將進行進一步的計算，但現在我遇到了綁定問題。在Chrome中的控制檯，我得到的錯誤是

Uncaught TypeError: Property 'item' of object#<ItemEntry> is not a function 

我想不通的地方，我應該來定義的newitem（這是從文本框中提交的值）。

這裏的HTML

<td><input type="text" data-bind="value: newItem" /></td> 
<button data-bind="click: addItem">Add Item</button> 

<table> 
    <thead><tr> 
     <th>Item Number</th><th>Price</th><th></th> 
    </tr></thead> 
    <tbody data-bind="foreach: itemNumbers"> 
     <tr> 
      <td data-bind="text: item"></td> 
      <td data-bind="text: price"></td> 
      <td><a href="#" data-bind="click: $root.removeItem">Remove</a></td> 
     </tr>  
    </tbody> 
</table> 

<h3 data-bind="visible: totalCost() > 0"> 
    Total Cost: $<span data-bind="text: totalCost().toFixed(2)"></span> 
</h3> 

而這裏的JavaScript的

function ItemEntry(item, price) { 
    var self = this; 
    self.item = item; 
    self.price = price; 

} 

// Overall viewmodel for this screen, along with initial state 
function EntryViewModel(newItem) { 
    var self = this; 
    self.newItem = newItem; 


    // Editable data 
    self.itemNumbers = ko.observableArray([ 
     new ItemEntry("New Item", "$22.50") 
    ]); 

    // Computed data 
    self.totalCost = ko.computed(function() { 
     var total = 0; 
     for (var i = 0; i < self.itemNumbers().length; i++) 
      total += self.itemNumbers()[i].item.price; 
     return total; 
    });  

    // Operations 
    self.addItem = function() { 
     self.itemNumbers.push(new ItemEntry(self.newItem, "$20.00")); 
    } 
    self.removeItem = function(item) { self.itemNumbers.remove(item) } 
} 

ko.applyBindings(new EntryViewModel()); 

Answer 1

我看到幾個更新，您將可能想讓：

• ItemEntry接受Price的說法，而您在構造函數
中處理
• 你的項目/價格不是ItemEntry觀測，所以你formattedPrice不會需要一個計算，它可以只是一個正常功能（除非您選擇讓他們觀察到的一樣，如果你做了充分的編輯
• 的formattedPrice功能正在嘗試閱讀item.price()。 Price是一個單獨的參數，item實際上只是該項目的名稱。
• 在formattedPrice你可能想在調用addItem考慮值解析到一個數
• 第一個參數將是在該上下文中的數據（這是根視圖模型）。所以，你可以閱讀newItem，或者只使用self.newItem()和你當前的結構。
• 在addItem的末尾，您可能需要清除newItem，因此輸入框已準備好進行下一個輸入。
• 您的totalCost計算出的讀數爲item().price，只需要做item.price。

這裏是一個更新的撥弄着許多這些變化：http://jsfiddle.net/rniemeyer/8cDUn/

如果您想爲這些項目的編輯器，那麼你可能會想使ItemEntry成員觀察到。