Updating item array using knockout.js

Question

I am pretty new at using KnockoutJS as a framework, and I (obviously) encountered a question I cannot (or more likely, am not skilled enough to) find.

I have this product group and each product group contains array of products. Now, I managed to display a list of product groups and a list of all products without much problem. I want to increase product quantity, when user left-clicks a div containing product and decrease product quantity when user right-clicks a div containing products.

I have set up event handlers correctly as they get fired and handled without any problems and quantity is changed, but I cannot seem to get it to reflect on the page.

Markup:

<div class="viewProductGroup" data-bind="with: productGroupData">
    <h2 data-bind="text: Title"></h2>
    <div class="stickies" data-bind="foreach: Products">
        <div data-bind="click: $root.addProduct, 
                        event: { contextmenu: $root.removeProduct }">
            <span data-bind="text: Title"></span><br />(<span data-bind="text: Quantity"></span>)</div>
    </div>
</div>

Excerpt from JS:

function StickyExViewModel() {
    var self = this;

    self.productGroupData = ko.observable();

    // Behaviors
    self.addProduct = function (item) {
        item.Quantity++;
    }
    self.removeProduct = function (item) {
        item.Quantity--;
    }
}

ko.applyBindings(new StickyExViewModel());

Now, I am sure I don't understand something or have missed some wiring. Can you please help?

Edit

Here is JSON obtained from WCF service:

{"d":
    {"__type":"ProductGroup:#Stickyex.Services",
     "Created":"\/Date(1373407200000+0200)\/",
     "ID":1,
     "Products":[
        {"__type":"Product:#Stickyex.Services","Code":"0","ID":0,"Quantity":0,"Title":"0"},
        {"__type":"Product:#Stickyex.Services","Code":"1","ID":1,"Quantity":1,"Title":"1"},
        {"__type":"Product:#Stickyex.Services","Code":"2","ID":2,"Quantity":2,"Title":"2"}],
     "Title":"ProductGroup 1"}
}

Code to obtain JSON data (inside StickyExViewModel):

self.goToProductGroup = function(productGroup) {
    $.get(serviceUrl, { ixProductGroup: productGroup.ID }, function (data) {
        self.productGroupData(data.d);
    });
}

how do you get your data for product groups?? maybe you are accessing them in a wrong way — ebram khalil
– ebram khalil, Commented Jul 10, 2013 at 10:45
then do you use what to create your array?? ko.mapping.fromJSON()?? — ebram khalil
– ebram khalil, Commented Jul 10, 2013 at 11:00
I get JSON data from WCF service with $.get jQuery function. — Vladimir Kocjancic
– Vladimir Kocjancic, Commented Jul 10, 2013 at 11:01
can you write the code you use to convert your JSON into array? — ebram khalil
– ebram khalil, Commented Jul 10, 2013 at 11:02

Artem Vyshniakov · Accepted Answer · 2013-07-10 09:45:38Z

1

I guess that item.Quantity is observable so you cannot use increment and decrement to it. Each observable is a function so you have to use () to get or set value:

// Behaviors
self.addProduct = function (item) {
    item.Quantity(item.Quantity() + 1);
}
self.removeProduct = function (item) {
    item.Quantity(item.Quantity() - 1);
}

answered Jul 10, 2013 at 9:45

Artem Vyshniakov

16.5k3 gold badges46 silver badges48 bronze badges

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

Comments

Damien · Accepted Answer · 2013-07-10 09:46:18Z

1

The Quantity property needs to be an obsevable. So in StickyExViewModel you will able to do this :

function StickyExViewModel() {
    var self = this;

    self.productGroupData = ko.observable();

    // Behaviors
    self.addProduct = function (item) {
        item.Quantity( item.Quantity()++);
    }
    self.removeProduct = function (item) {
        item.Quantity( item.Quantity()--);
    }
}

By converting the Quantity into an observable, your Gui will be refreshed a soon as you change the property.

answered Jul 10, 2013 at 9:46

Damien

8,9873 gold badges34 silver badges43 bronze badges

3 Comments

Vladimir Kocjancic Over a year ago

How do I convert an item in an array of an array to observable though?

Damien Over a year ago

In the Product contructor write : self.Quantity = ko.observable(0); Instead of self.Quantity = 0;

Vladimir Kocjancic Over a year ago

Aha. So basically, I shouldn't bind directly to JSON object, but instead map it to JS objects with similar properties?

ebram khalil · Accepted Answer · 2013-07-10 11:37:13Z

1

i think you need to make little modification on the way you convert your productGroupData into observable object.

First: productGroupData should be observableArray not observable because it's actually an array.
self.productGroupData = ko.observableArray([]);

Second to convert your JSON string into that observableArray you can take advantage of KnockoutJS mapping plugin. This 'll make your coding a lot much better. So you can use it to convert your JSON into an observableArray

ko.mapping.fromJS(yourJS_Object, {}, self.productGroupData);//in case you have JS object

OR

ko.mapping.fromJSSON(yourJSON_String, {}, self.productGroupData);//in case you have JSON string.

Notice now all your properties or objects of your productGroupData are observables so to access them you need to use ()

edited Jul 10, 2013 at 11:37

answered Jul 10, 2013 at 11:31

ebram khalil

8,3197 gold badges45 silver badges60 bronze badges

2 Comments

Vladimir Kocjancic Over a year ago

productGroupData is not an array. It is an item containing an array.

Vladimir Kocjancic Over a year ago

In original post, you can see, I assign to self.productGroupData value of data.d, not data. Property "d" is just a thing that WCF services attach to JSON response they generate. So, basically, root item of self.productGroupData is an item where "__type":"ProductGroup:#Stickyex.Services" is defined.

Vladimir Kocjancic · Accepted Answer · 2013-07-11 07:15:11Z

Thanks to all of you who tried to and succeeded in helping me, I came to a final solution. In order to update Quantity, I should not bind to JSON object directly, but instead create classes in JS that represent a model of a JSON object.

function Product(item) {
    this.ID = item.ID;
    this.Title = item.Title;
    this.Quantity = ko.observable(item.Quantity);
}

function ProductGroup(data) {
    var self = this;
    this.ID = data.ID;
    this.Title = data.Title;
    this.Products = [];
    for (var i = 0; i < data.Products.length; i++) {
        self.Products.push(new Product(data.Products[i]));
    }
}

And the part where I obtain JSON was changed to:

self.goToProductGroup = function(productGroup) {
    $.get(serviceUrl, { ixProductGroup: productGroup.ID }, function (data) {
        self.productGroupData($.map(data, function (pg) {
            return new ProductGroup(pg);
        }));
    });
}

Collectives™ on Stack Overflow

Updating item array using knockout.js

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related