1

jsFiddle

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

我整理了一个jsFiddle，我相信它可以清楚地说明我想要完成的工作。

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

我对如何做到这一点有一些想法（挂钩到选择列表的更改事件），但是，我想知道是否有人有更好的“淘汰”方式来完成这个。

4

2 回答 2

1

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

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

我也为你更新了jsFiddle。

或者，使用我上面使用的相同逻辑的if 绑定，这实际上会将隐藏的元素从 DOM 中取出。

于 2013-02-06T19:16:32.663 回答
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(); } 
  }      
};
于 2013-02-06T20:08:02.680 回答