KnockoutJS observable properties in observable array not tracked

Question

This is a model:

        function DiscountItem(minDays, percent) {
            var self = this;
            self.minDays = ko.observable(minDays);
            self.discount = ko.observable(percent);
        }

        function TableItem(name, from, to, price, hasDiscount) {
            var self = this;
            self.name = name;
            self.from = from;
            self.to = to;
            self.price = price;
            self.discount = hasDiscount;
        }

        function AppViewModel() {
            var self = this;

            self.discounts = ko.observableArray([
                new DiscountItem(12, 4),
                new DiscountItem(20, 6)
            ]);

            self.table = ko.observableArray([
                new TableItem("first", "20.03","3.04", 400, 1),
                new TableItem("second", "11.04","4.05", 600, 0)
            ]);

            self.addDiscount = function() {
                self.discounts.push(new DiscountItem(0, 0));
            }

            self.removeDiscount = function() {
                self.discounts.remove(this);
            }

            self.addPeriod = function() {
                self.table.push(new TableItem("","","", 0, 1));
            }

            self.removePeriod = function() {
                self.table.remove(this);
            }

            self.pricing = ko.computed(function() {
                return JSON.stringify({
                    durationDiscount : self.discounts(),
                    periods: self.table()
                })
            }, self);
        }

and this is what i need:

Every time i change one of observable properties or add new item in observableArray i need to populate other input with JSON representation of data combined from self.discounts and self.table

something like this

{"durationDiscount":[{"minDays":12,"discount":4},{"minDays":20,"discount":6}],"periods":[{"name":"first","from":"20.03","to":"3.04","price":400,"discount":1},{"name":"second","from":"11.04","to":"4.05","price":600,"discount":0}]}

all works fine if I remove ko.observable() on model properties, but i need to track them.

If i add ko.observable(), self.discounts in ko.computed retuns me empty array

It's a good question, but hard to understand the problem. Can you perhaps reproduce the issue using jsfiddle.net or a code snippet here. — Jamiec
Yeas of course. I created a simplified version, for better understanding a problem jsfiddle.net/cbqenwy9 I need updating JSON data in textarea whenever i change values or add new rows — Wolf6969

Jamiec Jamiec · Accepted Answer · 2015-09-04T13:08:38

I think the only problem is that when those properties are observable, you are not getting their value in your pricing property. Try this:

self.pricing = ko.computed(function() {
    return JSON.stringify({
        durationDiscount : self.discounts().map(function(x){ 
              return { minDays: x.minDays(), discount: x.discount() }
        }),
        periods: self.table()
    })
}, self);

function DiscountItem(minDays, percent) {
    var self = this;
    self.minDays = ko.observable(minDays);
    self.discount = ko.observable(percent);
}

function TableItem(name, from, to, price, hasDiscount) {
    var self = this;
    self.name = name;
    self.from = from;
    self.to = to;
    self.price = price;
    self.discount = hasDiscount;
}

function AppViewModel() {
    var self = this;

    self.discounts = ko.observableArray([
        new DiscountItem(12, 4),
        new DiscountItem(20, 6)
    ]);

    self.table = ko.observableArray([
        new TableItem("first", "20.03","3.04", 400, 1),
        new TableItem("second", "11.04","4.05", 600, 0)
    ]);

    self.addDiscount = function() {
        self.discounts.push(new DiscountItem(0, 0));
    }

    self.removeDiscount = function() {
        self.discounts.remove(this);
    }

    self.addPeriod = function() {
        self.table.push(new TableItem("","","", 0, 1));
    }

    self.removePeriod = function() {
        self.table.remove(this);
    }

    self.pricing = ko.computed(function() {
        return JSON.stringify({
            durationDiscount : self.discounts().map(function(x){ return { minDays: x.minDays(), discount: x.discount() }}),
            periods: self.table()
        })
    }, self);
}

ko.applyBindings(new AppViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: discounts">
    <div>
        <span><input data-bind="value: minDays" /></span>
        <span><input data-bind="value: discount" /></span>
    </div>
</div>

<pre data-bind="text: pricing"></pre>

KnockoutJS observable properties in observable array not tracked

2 Answers