Knockoutjs - 引用计算的observable中的局部字段

时间:2017-01-12 08:52:32

标签: javascript knockout.js computed-observable

我是KO的新手,无法让计算值发挥作用。我有一个由许多对象组成的视图模型,因为我在数据库中有许多不同的表,我从中检索数据。这是我如何设置VM的示例。请随意批评我在这里做错的任何事情(尽管它与计算值有关):

var viewModel = function(object1, object2...) {
    var self = this;
    var activeProductCodes = ['AB-1', 'AB-2', 'AB-3'];

    self.myFirstObject = ko.observable({
        field1: ko.observable(object1.field1),
        field2: ko.observable(object1.field2),
        field3: ko.observable(object1.field3)
    });


    self.mySecondObject = ko.observable({
        productCode: ko.observable(object2.productCode),

        isActiveProduct: ko.computed(function() {
            return self.activeProductCodes.indexOf(productCode) !== -1 ? true : false;
        }, self)
    });
}

isActiveProduct不起作用,因为它不知道productCode是什么。我尝试过这样做.productCode,self.productCode,self.mySecondObject()。productCode,它们似乎都不起作用。 是否可以访问该值?我的整体虚拟机设置有什么问题导致失败吗?

由于

史蒂夫

更新: 我现在没有使对象可观察并且声明我的VM如此:

var viewModel = function(object1, object2...) {
    var self = this;
    var activeProductCodes = ['AB-1', 'AB-2', 'AB-3'];

    self.myFirstObject = {
        field1: ko.observable(object1.field1),
        field2: ko.observable(object1.field2),
        field3: ko.observable(object1.field3)
    }

    self.mySecondObject = {
        productCode: ko.observable(object2.productCode),

        isActiveProduct: ko.computed(function() {
            return self.activeProductCodes.indexOf(productCode) !== -1 ? true : false;
        }, self)
    }
}

1 个答案:

答案 0 :(得分:1)

除了评论中的简短讨论,当我在淘汰赛中处理子视图模型时,我倾向于正确地定义它们,而不是使用匿名对象。所以在你的情况下可能看起来像这样

var viewModel = function(object1, object2...) {
    var self = this;
    var activeProductCodes = ['AB-1', 'AB-2', 'AB-3'];

    self.myFirstObject = ko.observable(new myFirstViewModel(object1)); // omitted for brevity

    self.mySecondObject = ko.observable(new mySecondViewModel(object2, activeProductCodes ));
}

var mySecondViewModel = function(object2, activeProductCodes){
    var self = this;

    self.productCode = ko.observable(object2.productCode);
    self.isActiveProduct = ko.computed(function() {
            return activeProductCodes.indexOf(self.productCode()) !== -1 ? true : false;
    }, self)
}

我还提到你很有可能不需要子视图模型实际上是可观察的,所以你可能会侥幸逃脱:

self.mySecondObject = new mySeocndViewModel(object2, activeProductCodes );

这取决于您的使用案例。