javascript - 根据选择显示不同的表单域

Question

jsFiddle

我在项目的各个部分都使用了 Knockout.js。我正在寻找有关根据用户选择的内容将 HTML 内容添加到表单的最佳方法的建议。

我整理了一个 jsFiddle我相信这清楚地表明了我要完成的目标。

如果用户选择选项 1 或 2，来自 data-configuration="1,2" 的 HTML 标记将添加到表单中。如果用户选择选项 3，则会将来自 data-configuration="3" 的 HTML 标记添加到表单中。

我有一些关于如何做到这一点的想法( Hook 到选择列表的更改事件)，但是，我想知道是否有人有更好的“knockout ”方法来完成这个。

Answer 1

另一个想法是创建绑定(bind)处理程序，因为它可以让您更好地控制行为。

http://jsfiddle.net/DRP3d/

它需要编写的 jQuery(但只是为了使代码更简洁)。

本质上，它只是查看绑定(bind)值，查看您在 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(); } 
  }      
};