我正在尝试做的是创建一个包含项目列表的下拉列表。此下拉列表包含两类项目:收藏和非收藏(由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。
所以,我的问题是:
favorite
状态更改按钮的类别?favorite
状态?我也可以完全控制进入的数据,因此可以根据需要进行修改,以制作更清洁/更简单的解决方案。
提前致谢。
答案 0 :(得分:2)
修改: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
的单次传递。我可能会重新审视,因为我在等待别的东西时“摆弄”了这个。