未跟踪可观察数组中的 KnockoutJS 可观察属性

Question

这是一个模型：

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

这就是我需要的：

每次我更改可观察属性之一或在 observableArray 中添加新项目时，我都需要使用来自 self.discounts 和 self.table 的数据的 JSON 表示填充其他输入

类似的东西

{"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}]}

如果我删除模型属性上的 ko.observable() 一切正常，但我需要跟踪它们。

如果我添加 ko.observable()，ko.computed 中的 self.discounts 会返回空数组

Answer 1

observableArray 实际上不提供有关项目更改的通知，请参阅documentation note。因此，您有两个选择 - 订阅项目的更改或在您的计算范围内调用项目的可观察对象。我更喜欢这样的第二个

self.pricing = ko.computed(function() {
         return ko.toJSON({
                durationDiscount : ko.utils.arrayMap(this.discounts(), 
function(item){ 
  return new DiscountItem(ko.unwrap(item.discount), ko.unwrap(item.minDays)); })
               })}, self);

看我的叉子http://jsfiddle.net/xv62vs6c

Answer 2

我认为唯一的问题是，当这些属性是可观察的时，您不会在 pricing 属性中获得它们的 值。试试这个：

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>