使用淘汰赛更改复选框的动态价值需求

Question

我有三个元素：select框、复选框、输入框。

viewModel.listTest= [{ value: '1', name: '10' }, { value: '2', name: '20' }];
<select class="form-control" data-bind="options: listTest, value: TestSelectBox, optionsText: 'name', optionsValue: 'value', disable: TestTrigger()"></select>

viewModel.TestTrigger= ko.observable(false);
<input id="TestTrigger" type="checkbox" name="TestTrigger" data-bind="checked: TestTrigger" /> 

viewModel.inputTest = ko.observable('1');
<input name="inputTest " data-bind="value: inputTest , enable: TestTrigger(), valueUpdate: 'afterkeydown'" />

我想做的是：如果复选框被选中，输入的值应该传递给

viewModel.testValue

否则 select 框中的值应传递给

viewModel.testValue

我该怎么做？我想我可以在复选框上使用淘汰法订阅

Answer 1

给你的 select 盒子一个像这样的 id：

<select class="form-control"  id = "selectInput"..>

然后试试这个：

viewModel.testValue = initialValue

$("#TestTrigger").on("change", function(){
    if(this.checked)
      viewModel.testValue = $("input[name='inputTest']").val()
    else
       viewModel.testValue = $("#selectInput").val()
});

Answer 2

在单击事件中，调用一个函数来更新可观察对象的值 'testValue'。

<input id="TestTrigger" type="checkbox" name="TestTrigger" data-bind="checked: TestTrigger, click: setTestValue()" />

在您的视图模型中，

viewModel.testValue = ko.observable();

viewModel.setTestValue = function() {
    viewModel.testValue((viewModel.TestTrigger()) ? viewModel.inputTest() : viewModel.TestSelectBox()); 
    console.log(viewModel.testValue());
}

Answer 3

对 testValue 使用计算的可观察值：

HTML:

<select class="form-control" data-bind="options: listItems, value: selectValue, optionsText: 'name', optionsValue: 'name', disable: trigger()"></select>

<input id="TestTrigger" type="checkbox" data-bind="checked: trigger" /> 

<input type="text" data-bind="textInput: input , enable: trigger()" />

<div>
    Your test value is: <span data-bind="text: testValue">
</div>

JS:

var viewModel = function() {
    var self = this;

    var _selectValue = "";

    self.listItems = [{ value: '1', name: '10' }, { value: '2', name: '20' }];    

    self.trigger= ko.observable(false);

    self.selectValue = ko.observable();

    self.input = ko.observable('1');

    self.testValue = ko.computed(function() {
        if (self.trigger())
            return self.input();
        else
            return self.selectValue();
    });
};

ko.applyBindings(new viewModel());

Working JSFiddle

每次您更新 select 框、复选框或输入时，Knockout 都会调用您传递给 ko.computed() 的函数并更新绑定到它的任何控件。

在幕后，评估计算的可观察对象内部的可观察对象（trigger()、selectValue() 和 input()）的行为会为您设置对这三个可观察对象的订阅。无需手动订阅更新，这是 Knockout 省力魔法的很大一部分。

使用淘汰赛更改复选框的动态价值需求

Change dynamic value demand on checkbox with knockout

html

javascript

checkbox

jquery

knockout.js