与淘汰赛

按钮设置实现我用这个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>

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

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

谢谢。

来源

2013-04-01 Bronzato

使用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-01 08:38:50 gbs

你的溶液工作除我很好除去线'值（$（元件）.find（“按钮。主动'）。data（'value'））;'在init部分。一个问题：在init部分，你有一些代码removeClass然后addClass。我们在更新部分找到了相同的内容。调试时，我清楚地看到它的工作原理，但我不明白为什么要在两个不同的地方做这件事？不管怎么说，还是要谢谢你。 – Bronzato

您删除的行用于初始化“活动”类的初始位置的视图模型属性。点击按钮时，第一个removeClass/addClass（在点击事件处理程序中）用于更改“活动”类。第二个removeClass/addClass用于在更改视图模型属性时更改“活动”类。 – gbs

下面是一个不需要很多jQuery的解析的另一种方式。事实上，根本没有jQuery - 只是纯粹的淘汰赛。

从Knockout documentation

注1：传递一个“当前项目”作为参数传递给你的处理功能

当调用您的处理程序，淘汰赛将提供电流模型值作为第一参数。如果您为某个集合中的每个项目呈现一些UI，并且您需要知道哪个项目的UI已被点击，此功能特别有用。

HTML

我们将加载从ko.observableArray()中的项目，我们可以很容易地通过JS操纵它。为了在视图中显示，我们使用foreach。

通过敲除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-26 21:48:10

回答

相关问题