checkbox - knockout JS :- Label bind with delete button

Question

我使用下面的代码，这段代码工作正常。

但我想在标签检查时需要，标签与删除按钮绑定(bind)，并且在点击删除时，值取消选中。

这段代码怎么可能？

<div id="current-selected" style="" data-bind="text: selectedChoicesDelimited">
    <a href="" id="clearAll" >Clear All</a>                     
</div>
<div data-role="content" class="filter-options-content" role="tabpanel" aria-hidden="false">
    <ol class="items mcs-items" data-bind="foreach: choices">
        <li>
            <label>
                <input id="5" class="multifilter" value="attribute?activity?5" type="checkbox" data-bind="attr: { value: $data }, checked: $parent.selectedChoices" ><span data-bind="text: $data"><input type="button" value="Remove Task" data-bind="click: $parent.removeChoices"></span>
            </label>
        </li>
    </ol>
</div>

<script type="text/javascript">
    var viewModel = {};

    viewModel.choices = ["Outdoor", "Recreation", "Gym"];
    viewModel.selectedChoices = ko.observableArray([]);

    viewModel.selectedChoicesDelimited = ko.dependentObservable(function () {
        return viewModel.selectedChoices().join(",");
    });

    ko.applyBindings(viewModel);

</script>

下图中，此代码的输出。

enter image description here

下图，我想需要。单击 [x] 时，值取消选中。

enter image description here

Answer 1

首先让我解释一下，无论何时您使用 text 绑定(bind)它的作用，它实际上都会显示您传递给相关 DOM 元素的参数的文本值。事实上，knockout 使用您的参数将元素的内容设置为 文本节点。任何嵌套元素的内容都将被覆盖。我在您的代码中看到您的 text-binding 中有一个子 DOM 元素。

<div id="current-selected" style="" data-bind="text: selectedChoicesDelimited">
   <!-- this content will be overwritten by value of a your parameter -->
   <a href="" id="clearAll" >Clear All</a>                     
</div>

还是在这里

<span data-bind="text: $data">
   <!-- this content will be overwritten by value of a your parameter -->
   <input type="button" value="Remove Task" data-bind="click: $parent.removeChoices">
</span>

在这里我会做些什么来实现你正在寻找的东西。

工作示例:https://jsfiddle.net/kyr6w2x3/80/

HTML:

<ul>
 <!-- ko foreach: selectedChoices -->
  <li>
   <div>
     <span data-bind="ifnot:$index() === 0">,</span>
     <span data-bind="text:$data"></span> 
     <span data-bind="click:$parent.removeSelectedItem" class="remove">[x] </span>
   </div>
  </li>
   <!-- /ko -->
  <li>
     <a href="" id="clearAll" data-bind="click:removeAllSelectedItem ,visible:selectedChoices().length > 1" >Clear All</a>    
  </li>
</ul>


<div data-role="content" class="filter-options-content" role="tabpanel" aria-hidden="false">
    <ol class="items mcs-items" data-bind="foreach: choices">
        <li>
            <label>
                <input id="5" class="multifilter" value="attribute?activity?5" type="checkbox" data-bind="attr: { value: $data }, checked: $parent.selectedChoices" ><span data-bind="text: $data"></span>
            </label>
        </li>
    </ol>
</div>

JS:

var viewModel = {};
    viewModel.choices = ["Outdoor", "Recreation", "Gym"];
    viewModel.selectedChoices = ko.observableArray([]);
    viewModel.removeSelectedItem = function(data){
         ko.utils.arrayForEach(viewModel.selectedChoices(), function (item) {
          if (item === data)return viewModel.selectedChoices.remove(item);
        });
    }
    viewModel.removeAllSelectedItem = function(data){
      viewModel.selectedChoices([]);
    }
ko.applyBindings(viewModel);