基於選擇

Question

jsFiddle

我使用Knockout.js在我的項目的不同部分顯示不同的表單字段。我正在尋找建議，以根據用戶選擇的內容向表單添加HTML內容的最佳方式。

我放在一起jsFiddle，我認爲講清楚我想要完成的任務。

如果用戶選擇選項1或2，從data-configuration="1,2" HTML標記被添加到形式。如果用戶選擇選項3，則表單中會添加data-configuration="3"的HTML標記。

我對如何做到這一點有一些想法（掛入選擇列表的更改事件），但是，我想知道是否有人有更好的「淘汰賽」方式來完成此任務。

Answer 1

一個想法是因爲它可以讓你的行爲更多的控制權，以創建綁定處理程序。

http://jsfiddle.net/DRP3d/

它需要jQuery的書面（但僅只是爲了讓代碼更簡潔）。

從本質上講，它只是着眼於限值，看着你在你的HTML（數據結構）所使用的屬性，然後隱藏或顯示基於的價值，配置比較給定元素。

ko.bindingHandlers.showtype = { 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var $element = $(element); 
     var config = $(element).attr('data-configuration'); 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     config = config.split(','); 

     var found = false; 
     for(var i=0, len=config.length; i < len; i++) { 
      if (value == config[i]) { 
       found = true; 
       break; 
      } 
     } 
     if (found) { $element.show(); } else { $element.hide(); } 
    }  
}; 

Answer 2

一般來說，我會尋求建立基於下拉值在每個部分的CSS類，財產以後這樣的：

<div data-bind="css: { hide: TypeId() == '' || TypeId() != 3 }"> 

我已經更新了jsFiddle對你太。

或者，使用if-binding與I上面所用的同樣的邏輯，這實際上將採取隱藏要素出DOM的。其他