私はノックアウトjsが初めてです。私はそれを学ぼうとしています。私の学習プロセスとして、サンプルプログラムを作成しました。しかし、observableArray に新しい項目を追加しているときに問題に直面します。observableArray にアイテムを正常に追加できますが、追加後に選択したテキストが表示されません。しかし、アイテムが追加されます。その項目をクリックすると、すべての情報が下に表示されます。
私のHTML：
<div id="contener">
<div id="productListView">
<select multiple="multiple" id="MyproductListView" size="10" style="min-width: 120px;" data-bind="options: productCollection, value: listViewSelectedItem, optionsText: 'description'"></select>
</div>
<div id="productView" data-bind="with: selectedProduct">
<p>
SKU: <span data-bind="text: sku"></span>
</p>
<p>
Description: <span data-bind="text: description"></span>
</p>
<p>
SKU: <span data-bind="text: price"></span>
</p>
<p>
Description: <span data-bind="text: cost"></span>
</p>
<p>
Description: <span data-bind="text: quantity"></span>
</p>
</div>
<div id="NewProduct" data-bind="with: selectedProduct">
<form>
<fieldset>
<legend>Product Details</legend>
<label>SKU :
<input type="text" data-bind="value:sku" /></label>
<br />
<label>Description :
<input type="text" data-bind="value:description" /></label>
<br />
<label>Price :
<input type="text" data-bind="value:price" /></label>
<br />
<label>Cost :
<input type="text" data-bind="value:cost" /></label>
<br />
<label>Quantity :
<input type="text" data-bind="value:quantity" /></label>
</fieldset>
</form>
</div>
<div id="buttonContainer">
<button type="button" data-bind="click:addNewProduct">Add</button>
<button type="button" data-bind="click:RemoveProduct">Remove</button>
<button type="button" data-bind="click:DoneEditingProduct">Done</button>
</div>
</div>
私のノックアウトは：
window.myapp = {};
(function (myapp) {
var self = this;
function product() {
self.sku = ko.observable("");
self.description = ko.observable("");
self.price = ko.observable(0.00);
self.cost = ko.observable(0.00);
self.quantity = ko.observable(0);
}
myapp.Product = product;
}(window.myapp));
(function (myApp) {
function productsViewModel() {
var self = this;
self.selectedProduct = ko.observable();
self.productCollection = ko.observableArray([{ sku: 'sku', description: 'des', price: '5.0', cost: '8.0', quantity: '1' }]);
self.listViewSelectedItem = ko.observable(null);
self.addNewProduct = function () {
var p = new myApp.Product();
self.selectedProduct(p);
}.bind(self);
self.DoneEditingProduct = function () {
var p = self.selectedProduct();
if (!p)
return;
if (self.productCollection.indexOf(p) > -1)
return;
self.productCollection.push(p);
self.selectedProduct(null);
self.productCollection.valueHasMutated();
}.bind(self);
self.RemoveProduct = function () {
var p = self.selectedProduct();
if (!p)
return;
return self.productCollection.remove(p);
};
self.listViewSelectedItem.subscribe(function (product) {
if (product) {
self.selectedProduct(product);
}
});
}
myApp.ProductsViewModel = productsViewModel;
}(window.myapp));
(function (myApp) {
function app() {
this.run = function () {
var vm = new myApp.ProductsViewModel();
ko.applyBindings(vm);
};
}
myApp.App = app;
}(window.myapp));
var app = new myapp.App();
app.run();
私はすでに3日間それを探していて、たくさん検索していますが、更新されていない理由を探ることはできません.
私は何か間違ったことをしなければなりません。
アップデート ：
フィドルの私のコード: