0

我是淘汰赛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 天了，搜索了很多，但我无法探索为什么它没有更新。

我必须做错什么吗。

更新 ：

我的小提琴代码：

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

4

1 回答 1

1

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

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

上面更新了小提琴。

于 2013-05-13T16:57:22.750 回答