Why my UI is not update after add an item in a observableArray in Knockout js?

Question

I am new in knockout js. I am trying to learn it. As my learning process i made a sample program. But i face a problem while i add a new item in observableArray. i can successfully add an item in observableArray but after add it does not show any text in my select. But an item is added. When I click that item all information is show below.

my 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>

My Knockout is :

   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();

I already 3 days for it and search a lot but i can`t explore why it is not update.

Must i do something wrong.

Update :

My Code in Fiddle:

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

Can you create a jsfiddle that reproduces your problem? There's a lot of code here. Can you point out what isn't working as intended? It's a lot easier to help if you don't just throw everything at us. — Colin DeClue
– Colin DeClue, Commented May 13, 2013 at 14:38
Move the var self = this; inside of the function product() { and it will work... jsfiddle.net/595qW voting to close as too localized... — nemesv
– nemesv, Commented May 13, 2013 at 15:31

Sujesh Arukil · Accepted Answer · 2013-05-13 16:57:22Z

1

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

you are referencing the parent object 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);
    }

change that to

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);
    }

updated fiddle above.

answered May 13, 2013 at 16:57

Sujesh Arukil

2,46919 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why my UI is not update after add an item in a observableArray in Knockout js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related