1

私は観測可能な配列を持っていitemsます。ナビゲーションを形成する順序付けられていないリストが生成されます。クリックした項目にクラスを適用し、active他のすべての項目から削除したい。static を設定しようとしましたcss: { active: true }がactive、アイテムの実際のプロパティではないため、実装方法がわかりません。

クラスをアイテム配列に関連付けたくないためactive、必要に応じてDOMで変更するだけであるため、これを非観測値と呼びました。

<ul id='nav' data-bind="foreach: items">
    <li data-bind="css: {selected: false}">
        <a data-bind="text: name, click: click_nav"></a>
    </li>
</ul>

そしてKO...

function AppViewModel() {
    this.items = ko.observableArray([
        { name: 'Course 1' }
    ]);
    select_course = function select_course(){
        // set class `active` for this
    }
}
ko.applyBindings(new AppViewModel());
4

1 に答える 1

1

現在「アクティブな」アイテムを、関数AppViewModelで設定できる監視可能なプロパティに保存できますclick_nav

function AppViewModel() {
    this.items = ko.observableArray([
        { name: 'Course 1' },
        { name: 'Course 2' },
        { name: 'Course 3' }
    ]);    
    this.active = ko.observable();
    this.click_nav = function(item){
        this.active(item);
    };
}

$dataそして、現在のアイテム ( ) をバインディングのと比較できactiveます。css

<ul id='nav' data-bind="foreach: items">
    <li data-bind="css: {selected: $parent.active() == $data}">
        <a data-bind="text: name, click: $parent.click_nav.bind($parent)"></a>
    </li>
</ul>

JSFiddleのデモ。

于 2014-04-05T17:57:58.177 に答える