Question

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

这是原创作品。有一个文本输出，其中的值是从下拉列表中读取的。下拉列表中的每个项目都有一个数字值，并且正在格式化（使用数字JS）到文本中。然后在底部显示一个单个字符，对应于下拉列表的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项）上选择的任何值都将添加到{{1}上设置的任何值（ alpha或bravo ）并在displayValue()

上输出结果

我认为这就像制作另一个ko.computed一样简单，它会添加所选的变量并返回它们：

<h4 data-bind="text: sumOfValue"></h4>

但显然它不起作用。 This is what I'm trying to add and do (and failed) (JSFiddle)

我需要一个Obi-Wan-Kenobi。救命！：（

=============================== （前一个）

我要开始：http://jsfiddle.net/yku33mtq/1/

在那个小提琴上，我在self.sumOfValue = ko.computed(function () { sumCont = numeral(self.setNumValue() + self.displayTheValue()).format('0,0'); return sumCont; });下拉列表中选择了动态显示的数字值 - 然后显示一个字符，在底部的Select下拉列表中指定您的选择。 / p>

我试图在数字旁边添加另一个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>下拉列表中添加到当前数字。

请参阅Fiddle

一旦我在HTML上添加了新的select，而且甚至没有在JS上添加更改（http://jsfiddle.net/yku33mtq/5/），看起来脚本也开始失败了：/ {/ p>

什么是正确的方法以及在KnockoutJS中添加两个可以动态的下拉菜单的规则是什么？

Answer 1

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

因此，您需要访问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>

JS：

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

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

1 个答案: