1

我有一个可观察的数组items。生成一个无序列表，形成一个导航。我想将该类active应用于单击的项目，并将其从所有其他项目中删除。我试过设置一个静态的css: { active: true }，但由于active它不是项目的真实属性，我不知道如何实现它。

我称它为不可观察值，因为我不想将active类与 items 数组相关联，只是在必要时在 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 回答