Question

我使用这种都市风格的框架：http://metroui.org.ua/并且有一个按钮设置功能：http://metroui.org.ua/buttons-set.php

以下是基本实现：

<div class="button-set" data-role="button-set">
      <button>button 1</button>
      <button class="active">button 2</button>
      <button>button 3</button>
</div>

我想知道是否可以在淘汰赛中使用它？假设我想将它绑定到我的viewModel的可观察属性，如何在选中时自动更新我的值按钮更改？

我知道我们还有其他解决方案，例如：http://jsfiddle.net/cuhuak/Rswbk/但如果我成功使用此解决方案可能会很好。

感谢。

Answer 1

使用ko自定义绑定...

ko.bindingHandlers.buttonSet = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor();
        value($(element).find('button.active').data('value'));
        $(element).find('button').on('click', function () {
            $(element).find('button.active').removeClass('active');
            value($(this).data("value"));
            $(this).addClass('active');
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor();
        $(element).find('button.active').removeClass('active');
        $(element).find('button[data-value=' + value().toString() + ']').addClass('active');
    }
};

对于HTML：

<div class="button-set" data-role="button-set" data-bind="buttonSet: val">
      <button data-value="1">button 1</button>
      <button data-value="2" class="active">button 2</button>
      <button data-value="3">button 3</button>
</div>

Answer 2

这是一种不需要大量jQuery解析的替代方法。事实上，根本没有jQuery - 只是纯粹的淘汰赛。

来自Knockout documentation

注1：将“当前项目”作为参数传递给处理程序   功能

在调用处理程序时，Knockout将提供当前模型   value作为第一个参数。如果你这样做，这个特别有用   为集合中的每个项目渲染一些UI，您需要知道   点击了哪个项目的用户界面。

<强> HTML

我们将从ko.observableArray()加载项目所以我们可以通过JS轻松操作它。要在视图中显示此内容，我们使用foreach。

通过Knockout HTML评论，我们可以设置两个条件，显示具有li类的active。

<ul data-bind="foreach: places">
    <li>
        <!-- ko if: $root.activeItem() !== $data -->
          <span data-bind="text: $data, click: $parent.setActive"></span>
        <!-- /ko -->
        <!-- ko ifnot: $root.activeItem() !== $data -->
          <span data-bind="text: $data, click: $parent.setActive, attr: { class: 'active'}"></span>
        <!-- /ko -->
    </li>
</ul>

现在我们只需将place传递给函数setActive()即可。这会将自己分配给ko.observable() activeItem。在上面的标记中，询问每个项目是否是循环中的activeItem。

<强>的JavaScript

function MyViewModel() {
  var self = this;
  self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
  self.setActive = function(place) { self.activeItem(place) }
  self.activeItem = ko.observable()
}
ko.applyBindings(new MyViewModel());

示例

http://codepen.io/ajkochanowicz/pen/maylx

按钮设置实现与淘汰赛

2 个答案: