0

我使用这个 Metro 风格的框架： 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>

我想知道是否可以将它与淘汰赛一起使用？Let's say I would like to bind it to an observable property of my viewModel, how can I proceed to have my value updated automatically when selected button change?

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

谢谢。

4

2 回答 2

0

使用 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>
于 2013-04-01T08:38:50.040 回答
0

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

从淘汰赛文档

注 1：将“当前项”作为参数传递给处理函数

调用您的处理程序时，Knockout 将提供当前模型值作为第一个参数。如果您正在为集合中的每个项目呈现一些 UI，并且您需要知道单击了哪个项目的 UI，这将特别有用。

HTML

我们将从 a 加载项目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

于 2013-06-26T21:48:10.310 回答