Observable array within observable array

Question

I am trying to create a stock tracking app with knockoutjs. I have an observable array of products and I need the user to be able to add an n number of days that holds the stock count for each day.

This is my current code:

// Class to represent a row in the product grid
    function product(title, category, day) {
        var self = this;
        self.title = title;
        self.category = category;
        self.day = ko.observableArray([day]);
    }

    // Class to represent a day column
    function day(day, total, cost) {
        var self = this;
        self.day = day;
        self.total = ko.observable(total);
        self.cost = ko.observable(cost);
    }

    var viewModel = {
        products: ko.observableArray([
            new product("Name", "Category", new day('2', 10, 50)),
        ]),
        addProduct: function(param){
            //console.log(param);
            this.products.push(new product("Name", "Category", new day('1', 10, 50)));
        },
        removeProduct: function(product) {
            this.products.remove(product);
        }
    };

this displays the data correctly but now I want to create a function that will allow the user to add another day column to the table.

I am not sure that my approach using an observable array within another observable array is correct, or maybe there is a better solution? If this is the correct approach how would I build a function to add more day columns?

TIA!

Observable array within another Observable array it's ok. Do you mean function like this self.addDay = function(date){elf.day.push(date);};? — GSerjo
– GSerjo, Commented May 3, 2014 at 22:54

William · Accepted Answer · 2014-05-04 03:08:25Z

You can nest observables as deeply as you want.

I think your trying to add or remove day objects from each product object.

You could add a function onto your product object to add day objects.

 function product(title, category, day) {
        var self = this;
        self.title = title;
        self.category = category;
        self.day = ko.observableArray([day]);
        self.addNewDay = function(){ 
            self.day.push(new day());
        };
        self.removeDay = function(day){ 
            self.day.remove(day);
        };
    }

Then in the UI, when you bind to the the first array, you would be able to bind a button click to the addNewDay to add days, and then on each day bind a remove button. something like below.

 <!-- ko foreach: product -->

 <button type="button" data-bind="click: addNewDay" class="button">Add Day</button>

  <!-- ko foreach: day -->

        <div class="row">
            <div class="small-1 large-1 column">
                <button type="button" data-bind="click: $parent.removeDay" class="button round tiny">Remove</button>
            </div>

You could add the logic to your viewmodel instead of the product, but you then you may need to use $root. and play with it to be sure to remove and add from the correct product and correct day. checkout http://knockoutjs.com/documentation/binding-context.html to see the different contexts to move up the object graph.

Collectives™ on Stack Overflow

Observable array within observable array

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