3

ブートストラップでは、アイテムが選択されていることを示す標準的な方法は、.active クラスを使用することです。foreachノックアウト js 構造を介して作成されたリスト グループがあります。

<div class="list-group" data-bind="foreach: people">
     <a href="#" class="list-group-item" data-bind="click: $root.personSelected, css: {active: $root.chosenPerson.name == $data.name}">
          <h4 class="list-group-item-heading" data-bind="text: name"></h4>
     </a>
<div>

人物が選択されると、 への呼び出しによりpersonSelected、選択したオブジェクトが observable に設定されますpersonSelected。フォームの別のデータ バインディングを使用してcss: {active: $root.chosenPerson.name == $data.name}、現在の項目が選択されているかどうかを確認できると考えましたが、これは機能していないようです。jsFiddleを参照してください

正しい比較ステートメントを使用していない可能性があるか、これを行うためのより良い方法があると思います。何かご意見は？

ありがとう！

4

2 に答える 2

4

cssバインディングとそれをオブザーバブルと組み合わせることで、正しい軌道に乗っています。

ただし、最初にpersonSelected関数を修正して、オブザーバブルを正しく設定するchosenPerson必要があります (オブザーバブルは、新しい値を引数として呼び出す必要がある関数です)。

self.personSelected = function(person){
     self.chosenPerson(person);
}

name次に、この人が選択されているかどうかの戻り値に基づいて、新しいヘルパー関数を作成します (このすべてのロジックをバインド式にシャベルで入れることはできますが、これはお勧めできません) 。

self.isSelected = function(name) {
    var selectedperson = self.chosenPerson()
    if(selectedperson) //handle if no person is selected
    {
        return selectedperson.name == name;
    }
}

次に、バインディングでこの関数を使用するだけです。

<a href="#" class="list-group-item" 
            data-bind="click: $root.personSelected, 
                       css: { active: $parent.isSelected(name) }">

JSFiddleのデモ。

于 2013-10-14T14:34:11.763 に答える
2

問題は、選択された人の観察可能な値を設定していないことです。選択された人を何か新しいものに等しく設定していました。また、ビュー モデルがインスタンス化されたとき、テスト対象として定義された選択された人物の値がまだありませんでした。

http://jsfiddle.net/x52VL/1/

selectedPerson を設定するときは、これを行います -

    self.chosenPerson(person);

そして、このようにテストします-

        <a href="#" class="list-group-item" data-bind="click: $parent.personSelected, css: {active: $parent.chosenPerson().name == name}">
于 2013-10-14T14:34:16.033 に答える