отправка значений текстового поля с помощью knockout.js

Question

Я пытаюсь представить значение из текстового поля в массив, который будет отображаться в формате таблицы. Дальнейшие вычисления будут сделаны, но прямо сейчас у меня возникают проблемы с привязками. В консоли в хром ошибка, я получаю

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 аргумент, в то время как вы имеете дело с price в конструкторе
• Ваш товар/цена не являются наблюдаемыми в ItemEntry, поэтому ваш formattedPrice не нужно будет вычислять, это может быть просто нормальная функция (если вы не сделаете их видимыми, например, если вы сделали полный редактор
• formattedPrice функция пытается читать item.price(). Цена была отдельным аргументом, и item - это действительно просто имя элемента.
• В formattedPrice вы можете рассмотреть вопрос о разборе значения числа
• при вызове addItem первого аргумент будет данными в этом контексте (что вид модели корня). Итак, вы можете либо прочитать newItem, либо просто использовать self.newItem() с вашей текущей структурой.
• в конце addItem, вы, вероятно, захотите очистить newItem, чтобы поле ввода было готово к следующей записи.
• Ваш totalCost расчет item().price и просто необходимо сделать item.price.

Вот обновленная скрипка со многими из этих изменений: http://jsfiddle.net/rniemeyer/8cDUn/

Если вы хотите, чтобы редактор для этих элементов, то вы, вероятно, хотят, чтобы сделать ItemEntry членов наблюдаемым.