Javascript 使用knockout.js提交文本框值_Javascript_Knockout.js

Javascript 使用knockout.js提交文本框值

javascript knockout.js

Javascript 使用knockout.js提交文本框值,javascript,knockout.js,Javascript,Knockout.js,我试图将文本框中的值提交到一个数组中，该数组将以表格格式显示。将进行进一步的计算，但现在我在绑定方面遇到了问题。在chrome的控制台中，我得到的错误是 Uncaught TypeError: Property 'item' of object#<ItemEntry> is not a function Uncaught TypeError:对象#的属性“item”不是函数我不知道应该在哪里定义newItem（从文本框提交的值）这是HTML <td><inp

我试图将文本框中的值提交到一个数组中，该数组将以表格格式显示。将进行进一步的计算，但现在我在绑定方面遇到了问题。在chrome的控制台中，我得到的错误是

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

Uncaught TypeError:对象#的属性“item”不是函数

我不知道应该在哪里定义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());

功能项目条目（项目、价格）{
var self=这个；
self.item=项目；
self.price=价格；
}
//此屏幕的整体视图模型以及初始状态
函数入口视图模型（newItem）{
var self=这个；
self.newItem=newItem；
//可编辑数据
self.itemNumber=ko.observableArray([
新项目条目（“新项目”，“22.50美元”）
]);
//计算数据
self.totalCost=ko.computed（函数（）{
var合计=0；
对于（var i=0；i

我看到一些您可能希望进行的更新：

ItemEntry在构造函数中处理
```
Price
```
时接受
```
Price
```
参数
您的商品/价格在ItemEntry中不可观察，因此您的
```
formattedPrice
```
不需要计算，它可以是一个普通函数（除非您选择使它们可观察，就像您制作了一个完整的编辑器一样）
```
formattedPrice
```
函数正在尝试读取
```
item.price（）
```
。price是一个单独的参数，
```
item
```
实际上只是项目的名称
在代码>格式化价格< /代码>中，您可能需要考虑将值解析为数字
调用
```
addItem
```
时，第一个参数将是该上下文中的数据（这是根视图模型）。因此，您可以从中读取
```
newItem
```
，也可以对当前结构使用
```
self.newItem（）
```
在
```
addItem
```
的末尾，您可能需要清除
```
newItem
```
，这样输入框就可以进行下一个输入了
您计算的
```
totalCost
```
正在读取
```
item（）.price
```
，只需执行
```
item.price
```

下面是一个更新的小提琴，其中有许多变化：

如果您想要为这些项目创建一个编辑器，那么您可能想要使

ItemEntry

成员可见