从选择到按钮的敲除绑定数据

时间:2014-01-08 16:14:33

标签: javascript jquery html knockout.js

Fiddle for reference.

我正在尝试做的是创建一个包含项目列表的下拉列表。此下拉列表包含两类项目:收藏和非收藏(由1或0指定),最喜欢的项目位于选择组中。

<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>

当选择“收藏”项目时,选择左侧的按钮应具有favorited类,如果选择了不喜欢的项目,则应删除该类。

<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. 如何根据所选项目的favorite状态更改按钮的类别?
  3. 如何在点击按钮时切换所选项目的favorite状态?
  4. 一般来说,有没有更好的方法来写这一切? (相当新的Knockout仍然)
  5. 我也可以完全控制进入的数据,因此可以根据需要进行修改,以制作更清洁/更简单的解决方案。

    提前致谢。

1 个答案:

答案 0 :(得分:2)

请参阅my implementation

修改:modifed fiddle based on comments

减少一些== 0== 1支票。将favorite属性/属性转换为布尔值。由于css由项目的favorite驱动,因此<select>的值应为实际项目对象。使用敲除锯齿它看起来像

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

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

现在,css绑定可以“监听”您选择的更改。您可以通过以下几种方式实现。我选择使用computed

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

绑定它css: { favorited: cssToggle}。 要启用/实现收藏夹按钮的单击功能,请绑定方法click: toggleFavorite并在viewmodel中提供它:

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

此时,你应该有你想要的行为。我想我已经涵盖了我改变的一切,如果我错过了什么,请参考小提琴。有可能将foreach绑定减少为projects的单次传递。我可能会重新审视,因为我在等待别的东西时“摆弄”了这个。