KnockoutJS: Handling Select Boxes. Selecting a default value and removing an existing item

Question

I am having trouble handling checkboxes in Knockout JS.

jsfiddle link: http://jsfiddle.net/wenbert/Xyuhk/72/

Note that I have provided 2 select boxes for each parent (Hero). Each one is using a different way but both are more or less "observing" the same object.

Workflow

1. Click on a gray box
2. A box with a blue dotted line should appear containing the items of the Select box.
3. From here, you can edit the items of the select box.
4. Fiddle here: http://jsfiddle.net/wenbert/Xyuhk/72/

The Problems

1. When I remove an item, I am not able to remove it from the Select boxes. Note that I do not want to completely remove it from the object. I just want the current item to be flagged as "isDeleted".
2. Select A - hides the item but it leaves an empty option in the select box.
3. Select B - the "ifnot: isDeleted" is not having any effect on the options.

The Question

How do I handle Select Boxes? I have rendered 2 Select Boxes in 2 different ways to try to have the ifnot: isDeleted take effect but none of them are working.

Update: With this setup, how do I do the "selected" value of the select box?

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 ));
​
​

I hope everything is clear.

Any reply will be greatly appreciated.

THanks!

Answer 1

I would do the filtering in the viewmodel. So I would create a filtered collection something like availableSkills

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

And then I would use this in the selects:

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

Demo fiddle.