Knockout Js： - 使用刪除按鈕的標籤綁定

Question

我使用下面的代碼，此代碼工作正常。

但我想在標籤檢查時需要，標籤綁定與刪除按鈕，並且還點擊刪除時，值取消選中。

這段代碼怎麼可能？

<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結合它做什麼，它實際上顯示要傳遞到相關的DOM元素的參數的文本值。事實上，淘汰賽將您的參數設置爲text node。任何嵌套的元素內容都將被覆蓋。我在你的代碼中看到你的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);