Question

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

我把jsFiddle放在一起，我相信我已经明白了我想要完成的事情。

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

我有一些关于如何做到这一点的想法（勾选到选择列表的更改事件），但是，我想知道是否有人有更好的“淘汰”方式来实现这一点。

Answer 1

通常，我会根据下拉值在每个部分设置css类，如：

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

我也为你更新了jsFiddle。

或者，使用与我上面使用的逻辑相同的if-binding，这实际上会将隐藏的元素从DOM中删除。

Answer 2

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

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(); } 
  }      
};

根据选择显示不同的表单字段

2 个答案: