Question

我是淘汰赛中的新手。我正在努力学习它。作为我的学习过程，我制作了一个示例程序。但是当我在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天了，并且搜索了很多但我无法探究为什么它不会更新。

我必须做错事。

更新：

我的小提琴代码：

http://jsfiddle.net/shuvo009/ReSUL/1/

Answer 1

http://jsfiddle.net/sujesharukil/ReSUL/3/

您正在引用父对象 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);
    }

将其更改为

function product() {
        this.sku = ko.observable("");

        this.description = ko.observable("");

        this.price = ko.observable(0.00);

        this.cost = ko.observable(0.00);

        this.quantity = ko.observable(0);
    }

上面更新了小提琴。

为什么在Knockout js中的observableArray中添加项目后我的UI没有更新？

1 个答案: