knockout.js - 通过添加类保持无表单元素的状态

Question

嗨，我有一种情况，当用户单击其中一个 li 时，我有一个隐藏字段和一个包含 10 个项目的 ul，输入获取已更新并将类添加到当前 li。这是代码：

    <ul>
        <li data-bind="css: { active: $data.grade == 1 }"><a data-bind="click: $root.updateHiddenField">1</a></li>
        <li data-bind="css: { active: $data.grade == 2 }"><a data-bind="click: $root.updateHiddenField">2</a></li>
        <li data-bind="css: { active: $data.grade == 3 }"><a data-bind="click: $root.updateHiddenField">3</a></li>
        <li data-bind="css: { active: $data.grade == 4 }"><a data-bind="click: $root.updateHiddenField">4</a></li>
        <li data-bind="css: { active: $data.grade == 5 }"><a data-bind="click: $root.updateHiddenField">5</a></li>
         <li data-bind="css: { active: $data.grade == 6 }"><a data-bind="click: $root.updateHiddenField">6</a></li>
         <li data-bind="css: { active: $data.grade == 7 }"><a data-bind="click: $root.updateHiddenField">7</a></li>
         <li data-bind="css: { active: $data.grade == 8 }"><a data-bind="click: $root.updateHiddenField">8</a></li>
         <li data-bind="css: { active: $data.grade == 9 }"><a data-bind="click: $root.updateHiddenField">9</a></li>
         <li data-bind="css: { active: $data.grade == 10 }"><a data-bind="click: $root.updateHiddenField">10</a></li>
</ul>
<input type="hidden" data-bind="value: $data.grade"/>

   function updateHiddenField(model, event) {
        var link = $(event.currentTarget);
        link.parent().parent().find("li").removeClass("active");
        link.parent().addClass("active");
        var value = link.text();
        model.grade(value);
    }

这是应用程序的外观：

当用户单击其中一个按钮时，隐藏字段的值会更新，但我正在使用 jQuery 添加类。

当我单击左侧的按钮并转到不同的类别时出现问题，然后回到这里。当我这样做时，隐藏字段具有正确的值但 li 不保留活动类，它们看起来像它们从未被按下。实际上，该值保存在绑定的 observable 中，但用户无法知道这一点。

可以看出，我尝试使用以下语句添加条件类：

**css: { active: $data.grade == 1 }**

但它似乎没有用。

包括类别在内的所有数据都是一个模型。

谁能帮我解决这个问题？

Answer 1

因为你grade是一个ko.observable因此你需要用它来获得它的价值grade()。

因此，您需要将css绑定更改为：

data-bind="css: { active: $data.grade() == 1 }"

你可以大大简化你的updateHiddenField方法

function updateHiddenField(model, event) {
    var link = $(event.currentTarget);       
    model.grade(link.text());
}