KnockoutJs - 从ViewModel中的视图获取更新值

时间:2012-12-12 22:10:43

标签: asp.net knockout.js

我是KnockoutJs的新手,我正试图在.ascx中使用ASP.net webforms。

JsFiddle

视图

<table border="1" cellpadding="0" cellspacing="0">
<tr>
    <td>
        <input type="button" data-bind="click: addNewRow" style="-moz-border-bottom-colors: blue" value="Add More Lines" />
        <input type="button" data-bind="click: addToCart" style="-moz-border-bottom-colors: blue" value="Add Items to Cart" />
    </td>
</tr>
<tr>
    <th>Product Number</th>
    <th>Description</th>
    <th>Quantity</th>
</tr>
<tbody data-bind="foreach: quickEntries">
    <tr>
        <td>
            <input data-bind="text: $data.ItemPartNumb(), onkeyup: showValue" class="ItemPartNum" height="100" width="500" /> 
        </td>
        <td>
            <input data-bind="text: $data.ItemDescription()" class="ItemDescr" height="100" width="500" />
        </td>
        <td>
            <input data-bind="text: $data.ItemQuanties()" class="ItemQuan" height="100" width="500" />
        </td>
    </tr>
</tbody>

ViewModel

<script type="text/javascript">

var QuickEntry = function (_itemPartNumb, _itemDescription, _itemQuanities) {
    this.ItemPartNumb = ko.observable(_itemPartNumb);
    this.ItemDescription = ko.observable(_itemDescription);
    this.ItemQuanties = ko.observable(_itemQuanities);
};

function QuickEntriesViewModel() {

    var self = this;
    self.quickEntries = ko.observableArray([]);

    for (var i = 0; i < 10; i++) {
        self.quickEntries.push(new QuickEntry('Bob','Jack','Steve'));            
    }

    self.addNewRow = function() {
        self.quickEntries.push(new QuickEntry());
    };

    self.showValue = function(quickEntry) {
        alert(quickEntry.ItemPartNumb); //Nothing show
    };

    self.addToCart = function () {
        //Error here. How do i access the obserablearray?
        alert(self.quickEntries.length);
    };

};

//This is where you bind the ViewModel
ko.applyBindings(new QuickEntriesViewModel());

网页将以10个空的QuickEntry开始,用户可以添加更多行。它为我创建了一个包含10个空行的表。用户在表格中输入一些信息后,如项目编号,描述等。我将获取这些信息并调用web api POST方法。当我试图接受quickEntries observablesarray时。我什么都没有/未定义,当我尝试onkeyup。没有弹出窗口向我显示新值。

是否将元素限制为observable会自动更新其值吗?一旦其值发生变化,如何在ViewModel中获取可观察数组值?

由于

1 个答案:

答案 0 :(得分:0)

self.quickEntries()

将返回基础数组及其所有光荣数据