Question

我有三个要素：选择框，复选框，输入。

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

否则，选择框中的值应传递给

viewModel.testValue

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

Answer 1

对testValue使用计算的observable：

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

每次更新选择框，复选框或输入时，Knockout都会调用您传递给ko.computed（）的函数并更新绑定到它的控件。

在幕后，在计算的observable内部评估observable（trigger（），selectValue（）和input（））的行为会为您设置对这三个observable的预订。无需手动订阅更新，这是Knockout省力的魔力的重要组成部分。

Answer 2

为您的选择框添加如下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 3

在点击事件中，调用一个函数来更新observable＆＃39; testValue＆＃39;的值。

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

在您的viewmodel中，

viewModel.testValue = ko.observable();

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

使用knockout更改复选框上的动态值需求

3 个答案: