将下拉列表中的值添加到KnockoutJS中另一个下拉列表中的任意一组值

Question

(更新)我一直在练习KOjs，我对一些复杂的事情很好奇。

以这个例子(JSFiddle)为例

那是最初的作品。有一个文本输出，它的值是从下拉列表中读取的。下拉列表中的每个项都有一个数字值，并且正在将其格式化(使用numeralJS)到文本中。然后，一个字符出现在底部，对应于下拉列表的optionText值。

下面是我所做的工作:我在有预定义值的地方添加了一个新的下拉列表：

var x = 300;
var y = 1234;
var z = 78;

select标记就在原始select标记旁边：

<select id="addThis" data-bind="options: addToThisSet, optionsText: 'numType', value: setNumValue"></select>

<select id="theList" data-bind="options: htmlSelectSet, optionsText: 'theText', value: displayTheValue"></select>


<p><span data-bind="text: charSymbol"></span></p>

我尝试为新的select标记添加内容数组，格式与原来的相同(我对此有不好的预感。是这样吗？)

self.addToThisSet = [{
        numType: "item 1",
        NumValue: x
    }, {
        numType: "item 2",
        NumValue: y
    }, {
        numType: "item 3",
        NumValue: z
    }];
    self.setNumValue = ko.observable();

    self.htmlSelectSet = [{
        theText: "alpha",
        theValue: num1
    }, {
        theText: "bravo",
        theValue: num2
    }];
    self.displayTheValue = ko.observable();

我的目标非常简单:在setNumValue()上选择的任何值(项目1、项目2或项目3)都将添加到displayValue() (alpha或bravo)上设置的任何值中，并在<h4 data-bind="text: sumOfValue"></h4>上输出其结果。

我认为这就像做另一个添加选中的变量并返回它们的ko.computed一样简单：

self.sumOfValue = ko.computed(function () {
        sumCont = numeral(self.setNumValue() + self.displayTheValue()).format('0,0');
        return sumCont;
    });

但很明显这不管用。这就是我试图添加和做的(失败的) (JSFiddle)

我需要一个欧比-万-克诺比。救命:(

=============================== (前)

我有一个开始：http://jsfiddle.net/yku33mtq/1/

在这个Fiddle上，我在Select下拉列表中动态显示了一个数字值，然后在Select下拉列表中显示一个字符来指定您的选择。

我试着在数字旁边添加另一个select下拉列表，结果它坏了：

<h4 data-bind="text: sumOfValue"></h4><select id="addThis" data-bind="options: addToThisSet, optionsText: 'numType', value: setNumValue"></select>

<select id="theList" data-bind="options: htmlSelectSet, optionsText: 'theText', value: displayTheValue"></select>


<p><span data-bind="text: charSymbol"></span></p>

基本上，新的下拉列表也有数字值，根据您的选择，这些数字将添加到下一个select下拉列表中的当前数字中。

请参阅小提琴

当我在select上添加新的http://jsfiddle.net/yku33mtq/5/时，脚本看起来也开始失败了，甚至没有将更改放在JS上(http://jsfiddle.net/yku33mtq/5/) :/

什么是正确的方法，以及在KnockoutJS中添加两个动态下降的规则是什么？

Answer 1

您只是忘记访问计算中的对象属性。在您的选择中，整个对象被插入到可观察到的value绑定中。

因此，您需要访问self.setNumValue().NumValue。

我做了一个有用的小提琴：http://jsfiddle.net/yku33mtq/9/

HTML：

<h4 data-bind="text: sumOfValue"></h4>
<select id="addThis" data-bind="options: addToThisSet, 
                                optionsText: 'numType',     
                                value: setNumValue"></select>
<select id="theList" data-bind="options: htmlSelectSet, 
                                optionsText: 'theText',
                                value: displayTheValue"></select>
<p><span data-bind="text: charSymbol"></span></p>

联署材料：

function thisViewModel() {
    var self = this;

    self.addToThisSet = [{
        numType: "item 1",
        NumValue: 300
    }, {
        numType: "item 2",
        NumValue: 1234
    }, {
        numType: "item 3",
        NumValue: 78
    }];
    self.setNumValue = ko.observable();

    self.htmlSelectSet = [{
        theText: "alpha",
        theValue: 35450
    }, {
        theText: "bravo",
        theValue: 2450
    }];
    self.displayTheValue = ko.observable();

    self.sumOfValue = ko.computed(function () {
        var numValue = self.setNumValue();
        var display = self.displayTheValue();
        if (numValue && display) {
            return numValue.NumValue + display.theValue;
        }
    });

    self.charSymbol = ko.computed(function () {
        if (self.displayTheValue()) {
            if (self.displayTheValue().theText == "alpha") {
                return "A";
            }
            if (self.displayTheValue().theText == "bravo") {
                return "B";
            }
        }
        return null;
    });

}

ko.applyBindings(new thisViewModel());