私は KnockoutJs を初めて使用し、.ascx の ASP.net Web フォームで使用しようとしています。
景色
<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>
ビューモデル
<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());
Web ページは 10 個の空の QuickEntry で開始され、ユーザーはさらに行を追加できます。10行の空のテーブルが作成されました。ユーザーがアイテムの部品番号、説明などの情報を表に入力した後。これらの情報を取得して、Web API POST メソッドを呼び出します。quickEntries observablesarray にアクセスしようとすると。onkeyupを試してみると、何も/未定義になりました。新しい値を表示するポップアップはありません。
オブザーバブルにバインドされた要素はその値を自動更新しませんか? 値が変更されたら、ViewModel 内で監視可能な配列値を取得するにはどうすればよいですか?
ありがとう