KnockoutJS：處理選擇框。選擇默認值並刪除現有項目

Question

我在處理Knockout JS中的複選框時遇到問題。

的jsfiddle鏈接：http://jsfiddle.net/wenbert/Xyuhk/72/

請注意，我已經提供了2個選擇框爲每個父（英雄）。每個人都在使用不同的方式，但都是或多或少「觀察」同一個對象。

工作流程

1. 點擊灰色框
2. 用藍色虛線應該出現一個包含選擇框中的項目的框。
3. 從這裏，您可以編輯選擇框的項目。
4. 小提琴這裏：http://jsfiddle.net/wenbert/Xyuhk/72/

的問題

1. 當我刪除一個項目，我無法從選擇框中刪除它。請注意，我不想將其完全從對象中移除。我只想將當前項目標記爲「isDeleted」。
2. 選擇A - 隱藏項目，但在選擇框中留下空白選項。
3. 選擇B - 「ifnot：isDeleted」對選項沒有任何影響。

問題

如何處理選擇框？我已經用2種不同的方法渲染了2個選擇框，試圖讓ifnot: isDeleted生效，但是他們都沒有工作。

更新：使用此設置，如何執行選擇框的「選定」值？

HTML

<button data-bind="click: addHero">Add Hero</button> 
<ul data-bind="foreach: heroes"> 
    <li class="parent" data-bind="ifnot: isDeleted, click: $parent.selectHero"> 
     <input class="big-box" type="text" data-bind="value: name" /> 
     <button class="btn-small" data-bind="click: $parent.removeHero">Remove Hero</button> 
     <br/> 

     SKILLS: 

     Select A) <select data-bind="foreach: skills"> 
      <option data-bind="value: name, text: name, ifnot: isDeleted"></option>    
     </select> 
     Select B) <select data-bind="options: skills, optionsText: 'name', value: selected_skill.name, ifnot: isDeleted">   
     </select> 
     <br/> 
     <span class="instructions">(Step 1: Click somewhere here)</span> 
    </li> 
</ul> 

<div class="edit-panel" data-bind="if: selectedHero"> 
    Edit Skill:<br/> 
    <div data-bind="with: selectedHero"> 
     <button class="btn-small" data-bind="click: addSkill">Add Skill</button> 
     <ul data-bind="foreach: skills"> 
      <li data-bind="ifnot: isDeleted"> 
       <button class="btn-small" data-bind="click: $parent.setAsDefaultSkill">Set as default</button> 
       <input data-bind="value: name" /> 
       <button class="btn-small" data-bind="click: $parent.removeSkill">Remove Skill</button> 
      </li> 
     </ul> 
     <span class="instructions">(Step 2: Remove a Skill, then have a look at the Select Box above.)</span> 
    </div> 
</div> 


<pre data-bind="text: ko.toJSON($data, null, 2)"></pre> 

的Javascript

var initialData = [ 
    { 
     id: '1', 
     name: "Batman", 
     isDelete: false, 
     selected_skill: {name: "Boxing", isDeleted: false}, 
     skills: [ 
      { id: '1', name: "Karate", isDeleted: false }, 
      { id: '2', name: "Boxing", isDeleted: false}, 
      { id: '6', name: "Sonar", isDeleted: false} 
     ] 
    }, 
    { 
     id: '2', 
     name: "Hulk", 
     isDelete: false, 
     skills: [ 
      { id: '3', name: "MMA", isDeleted: false }, 
      { id: '4', name: "Rage", isDeleted: false}, 
      { id: '5', name: "Extra Strength", isDeleted: false} 
     ] 
    }, 
]; 


function Hero(data) { 
    var self = this; 
    self.name = ko.observable(data.name); 
    self.selected_skill= ko.observable(data.selected_skill); 
    self.skills = ko.observableArray(ko.utils.arrayMap(data.skills, function(i) { 
     return new Skills(i); 
    })); 

    self.addSkill = function() { 
     self.skills.push(new Skills({name: '---', isDeleted: false})); 
    } 

    self.setAsDefaultSkill = function(item) { 
     self.selected_skill(item); 
    } 

    self.isDeleted = ko.observable(data.isDeleted); 

    self.removeSkill = function(item) { 
     item.isDeleted(true); 
    } 
} 

function Skills(data) { 
    var self = this; 
    self.name = ko.observable(data.name); 
    self.isDeleted = ko.observable(data.isDeleted); 
} 

function SuperheroViewModel(data) { 
    var self = this; 
    self.heroes = ko.observableArray(ko.utils.arrayMap(data, function(i){ 
     return new Hero(i); 
    })); 

    self.selectedHero = ko.observable(); 
    self.selectedHero.skills = ko.observableArray(); 

    self.addHero = function() { 
     self.heroes.push(
      new Hero({ 
       name: 'Wolverine', 
       isDelete: false, 
       skills: [{name: 'Breathing', isDeleted: false}], 
      }) 
     ); 
    } 

    self.selectHero = function(item) { 
     self.selectedHero(item); 
    } 

    self.removeHero= function(item) { 
     item.isDeleted(true); 
    } 
} 

ko.applyBindings(new SuperheroViewModel(initialData)); 
​ 
​ 

我希望一切都清楚了。

任何答覆將不勝感激。

謝謝！

Answer 1

我會在viewmodel中進行過濾。所以我想創建一個過濾收集類似availableSkills

self.availableSkills = ko.computed(function() { 
    return ko.utils.arrayFilter(self.skills(), function(item) { 
     return !item.isDeleted(); 
    }) 
}); 

然後，我會在選擇使用：

<select data-bind="foreach: availableSkills"> 
    <option data-bind="value: name, text: name"></option>    
</select> 

Demo fiddle.