javascript - 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());