與淘汰賽

按鈕設置實現我用這個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

回答

相關問題