Question

当点击选择复选框时，将显示当前功能选项，反之亦然。

我还想在复选框中显示下拉选择值，反之亦然。

var viewModel = {};

viewModel.choices = ["one", "two", "three", "four", "five"];
viewModel.selectedChoices = ko.observableArray([]);
viewModel.testing = ko.observableArray();

viewModel.selectedChoicesDelimited = ko.dependentObservable(function () {
    viewModel.testing(viewModel.selectedChoices());
    //return viewModel.selectedChoices().join(",");
});

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<h1>Select Items</h1>
<ul class="options" data-bind="foreach: choices">
    <li>
        <label>
            <input type="checkbox" name="NotifyMembers" data-bind="attr: { value: $data }, checked: $parent.selectedChoices" /><span data-bind="text: $data"></span>
        </label>
        <select name="" id="">
            <option value="1">One</option>
            <option value="1">Two</option>
            <option value="1">Three</option>
        </select>
    </li>
</ul>
<hr />
<h1>Your Selected Items</h1>
<ul class="options" data-bind="foreach: testing">
    <li>
        <label>
            <input type="checkbox" name="NotifyMembers" data-bind="attr: { value: $data }, checked: $parent.selectedChoices" /><span data-bind="text: $data"></span>
        </label>
        <select name="" id="">
            <option value="1">One</option>
            <option value="1">Two</option>
            <option value="1">Three</option>
        </select>
    </li>
</ul>
<div data-bind="text: selectedChoicesDelimited"></div>

Answer 1

这里的诀窍就是你应该随身携带dependency而不破坏它。

查看：

<ul class="options" data-bind="foreach: Looper"> <li> <label> <input type="checkbox" name="NotifyMembers" data-bind="attr: { value: $data.name }, checked: $parent.selectedChoices" /><span data-bind="text: $data.name"></span> </label> <select data-bind="options:$root.listDD,optionsText:'val',optionsValue:'id',value:selectedOne"></select> </li> </ul>

<强>视图模型：

function Builder(item) { this.name = ko.observable(item) this.selectedOne = ko.observable(); } function Generator(choices) { return ko.utils.arrayMap(choices, function (item) { return new Builder(item); }) } var viewModel = {}; viewModel.choices = ["one", "two", "three", "four", "five"]; viewModel.listDD = ko.observableArray([{'id': 1,'val': 'one'},{'id':2,'val': 'two'}, { 'id': 3,'val': 'three'}]); viewModel.Looper = ko.observableArray(Generator(viewModel.choices)); viewModel.testing = ko.observableArray(); viewModel.selectedChoices = ko.observableArray(); viewModel.selectedChoicesDelimited = ko.computed(function () { if (viewModel.selectedChoices()) { viewModel.testing([]); ko.utils.arrayForEach(viewModel.selectedChoices(), function (item1) { ko.utils.arrayFilter(viewModel.Looper(), function (item2) { if (item1 == item2.name()) { viewModel.testing.push(item2);//Here we are now passing exact dependency rather creating instance(if created dependency destroyed) return true; } }); }); } }); ko.applyBindings(viewModel);

运行示例 here 以检查

Answer 2

您的viewmodel应该更仔细地建模视图。您使用的每个对象都有一个标签，一个复选框和一个选择器。在视图模型中而不是在HTML中建模选项列表也是有意义的。

PHPStorm已被dependentObservable取代。

以下是我如何重做它：

＆＃13;

computed

＆＃13;

var viewModel = {};

viewModel.options = [
  {name: 'One', value: 1},
  {name: 'Two', value: 2},
  {name: 'Three', value: 3}
];

function choice(label) {
  return {
    label: label,
    chosen: ko.observable(),
    selectedValue: ko.observable()
  };
}

viewModel.choices = [
  choice("one"),
  choice("two"),
  choice("three"),
  choice("four"),
  choice("five")
];
viewModel.testing = ko.computed(function () {
  return ko.utils.arrayFilter(viewModel.choices, function(item) {
    return item.chosen();
  });
});
viewModel.selectedChoicesDelimited = ko.computed(function () {
  var labels = ko.utils.arrayMap(viewModel.testing(), function (item) {
    return item.label
  });
  return labels.join(',');
});
ko.applyBindings(viewModel);

＆＃13;

具有下拉事件的淘汰复选框

2 个答案: