1

我在处理 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 ));
​
​

我希望一切都清楚。

任何答复将不胜感激。

谢谢！

4

1 回答 1

1

我会在视图模型中进行过滤。所以我会创建一个过滤的集合，比如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>

演示小提琴。

于 2012-11-09T06:11:13.743 回答