刪除帶有復選框的動態值需求

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 

我怎樣才能做到這一點 ？ 我想我可以使用剔除方法在復選框上訂閱

Answer 1

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

工作中的JSFiddle

每次更新選擇框，復選框或輸入時，Knockout都會調用傳遞給ko.computed（）的函數，並更新綁定到該函數的任何控件。

在幕后，在計算的可觀察對象內部評估可觀察對象（trigger（），selectValue（）和input（））的操作將為您設置對這三個可觀察對象的訂閱。 無需手動訂閱更新，這是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

在單擊事件上，調用一個函數以更新可觀察到的“ 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());
}