当你在Select脚本中调用它时,如何定义Knockout计算Var?

时间:2015-01-28 10:27:51

标签: javascript jquery html knockout.js

我在这里有一个使用KnockOut JS的JavaScript:

JSFiddle

正如您在JS脚本中看到的那样,有一个Select self.langSet

然后由三个ko.computed函数使用:i1Txti2Txti3Txt

然后是另一个下拉列表self.selectionSet,其中theDropTxt值必须分别为i[1-3]Txt

我的问题: 我知道在我使用i1Txt()i2Txt()i3Txt()之前 - 我需要让他们验证他们的定义就像

if (self.setLang()) {
        if (self.setLang().langTxt == "English") {
            return "Two Fifty";
        }
        if (self.setLang().langTxt == "Français") {
            return "Deux cent cinquante";
        }
    }
    return null;

使用self.setLang()之前验证self.setLang().langTxt的定义。

我试过这样做:

if (i1Txt() && i2Txt() && i3Txt()) {
self.selectionSet = [{
    theDropTxt: i1Txt(),
    theDropVal: selVal1
}, {
    theDropTxt: i2Txt(),
    theDropVal: selVal2
}, {
    theDropTxt: i3Txt(),
    theDropVal: selVal3
}];
}
self.setDrops = ko.observable();

JSFiddle

(LOL)

但这一切都错了。我该怎么做?

2 个答案:

答案 0 :(得分:1)

您的self.selectionSet也可能计算

self.selectionSet = ko.computed(function(){
    return [{
        theDropTxt: self.i1Txt(),
        theDropVal: selVal1
    }, {
        theDropTxt: self.i2Txt(),
        theDropVal: selVal2
    }, {
        theDropTxt: self.i3Txt(),
        theDropVal: selVal3
    }];
});

这是你想要的吗? http://jsfiddle.net/pvd6xLjL/2/

答案 1 :(得分:1)

我建议从另一种方法解决问题。这些值来自语言:为什么在您可以更紧密地耦合语言和值时创建计算字段?

http://jsfiddle.net/Quango/m80L37y8/

首先,我为每种语言添加了values属性,该属性包含数组中所需的文本:

self.langSet = [{
    langTxt: "English",
    langVal: langVal1,
    values: [{
        theDropTxt: "Three Twenty",
        theDropVal: selVal1
    }, {
        theDropTxt: "Four Eighty",
        theDropVal: selVal2
    }, {
        theDropTxt: "Two Fifty",
        theDropVal: selVal3
    }]
}, {
    langTxt: "Français",
    langVal: langVal2,
    values: [{
        theDropTxt: "Trois-cent Vingt",
        theDropVal: selVal1
    }, {
        theDropTxt: "Quatre cent quatre-vingt",
        theDropVal: selVal2
    }, {
        theDropTxt: "Deux cent cinquante",
        theDropVal: selVal3
    }]
}];

我将selectionSet更改为observableArray

self.selectionSet = ko.observableArray([]);

最后我在setLang observable中添加了.subscribe,以便我们可以发现它何时发生变化:

// subscribe to changes in language and change selections
self.setLang.subscribe(function (newValue) {
    // change the array 
    self.selectionSet(newValue.values);
});

更改setLang时,会触发订阅。然后,这会更改第二个下拉源以使用新语言。我认为这是一个使用计算值的更简洁的解决方案。