1

Knockout JS でチェックボックスの処理に問題があります。

jsfiddle リンク: http://jsfiddle.net/wenbert/Xyuhk/72/

親 (Hero) ごとに 2 つの選択ボックスを用意したことに注意してください。それぞれが異なる方法を使用していますが、どちらも多かれ少なかれ同じオブジェクトを「観察」しています。

ワークフロー

ここに画像の説明を入力

  1. 灰色のボックスをクリックします
  2. Select ボックスの項目を含む青い点線のボックスが表示されます。
  3. ここから、セレクトボックスの項目を編集できます。
  4. ここでフィドル: http://jsfiddle.net/wenbert/Xyuhk/72/

問題点

  1. 項目を削除すると、選択ボックスから削除できません。オブジェクトから完全に削除したくないことに注意してください。現在のアイテムに「isDeleted」のフラグを付けたいだけです。
  2. Select 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 に答える