javascript - knockout 从选择到按钮的绑定(bind)数据

Question

Fiddle for reference.

我试图做的是创建一个包含项目列表的下拉列表。该下拉列表包含 2 类项目:最喜欢的和不最喜欢的(用 1 或 0 指定)，最喜欢的项目位于 opt-group 中。

<select data-bind="foreach: $root.favorites, value: project_id, event: {change: console.log('changed') }" class="selectpicker" data-live-search="true">
    <!-- ko if: $data == 1 -->
    <optgroup data-bind="attr: {label: 'Favorites'}, foreach: $root.projects">
        <!-- ko if: favorite() == "1" -->
        <option data-bind="text: project_name, value: project_id"></option>
        <!-- /ko -->
    </optgroup>
    <!-- /ko -->
    <!-- ko if: $data == 0 -->
            <option data-divider="true"></option>
        <!-- ko foreach: $root.projects -->
            <!-- ko if: favorite() == 0 -->
            <option data-bind="text: project_name, value: project_id"></option>
            <!-- /ko -->
        <!-- /ko -->
    <!-- /ko -->
</select>

选择“收藏夹”项目时，选择左侧的按钮应具有收藏夹类，如果选择非收藏夹项目，则应删除该类.

<button class="btn btn-default btn-sm" data-bind="click: , css: { favorited: true }" style="padding: 0px 7px; font-size: 20px; margin-left: 10px; color: #cccccc;"><span class="glyphicon glyphicon-star" style="padding-top: 5px;"></span></button>

(代码目前只是默认在按钮上设置收藏夹，只是为了显示它应该是什么样子)

当单击选择左侧的按钮时，它还应该切换所选项目的 favorite 属性 - 如果它现在是收藏夹，则为 1，如果不再是收藏夹，则为 0最喜欢的。

所以，我的问题是:

1. 有没有比我这里更好的设置选择的方法？
2. 如何根据所选项目的收藏状态更改按钮的类别？
3. 单击按钮时如何切换所选项目的收藏状态？
4. 总的来说，有没有更好的方法来编写所有这些内容？ (对于 knockout 来说还相当陌生)

我还可以完全控制传入的数据，因此可以根据需要进行修改，以制定更清晰/更简单的解决方案。

提前致谢。

Answer 1

参见my implementation .

编辑:modifed fiddle based on comments

减少几个 == 0 , == 1检查。将最喜欢的属性/属性转换为 bool 值。由于css是由favorite驱动的对于一个项目，令 <select> 的值是一个实际的项目对象。使用 knockout 别名看起来像

foreach: {data: $root.projects, as: 'projectAlias'}"

现在我们可以正确使用selectedProject了模型中的变量。确保删除 undefined初始化器并将其设置为可观察的: self.selectedProject = ko.observable();

现在 css 绑定(bind)可以“监听”您选择的更改。您可以通过几种不同的方式来实现这一目标。我选择使用computed .

self.cssToggle = ko.computed(function() {
    if(self.selectedProject()){
        return self.selectedProject().favorite();
    }
    return false;
}); 

绑定(bind)css: { favorited: cssToggle} 。要启用/实现收藏夹按钮的点击功能，请绑定(bind)一个方法 click: toggleFavorite并在 View 模型中提供它:

self.toggleFavorite = function () {
    var currentState = self.selectedProject().favorite();
    self.selectedProject().favorite(!currentState);
}

此时，您应该具有您想要的行为。我想我已经涵盖了我更改的所有内容，请引用 fiddle 以防我错过了某些内容。或许可以减少foreach绑定(bind)到单次 projects 。当我在等待其他事情时“摆弄”这个时，我可能会重新审视这一点。