如何使用预定义的文本和值选项定义自定义挖空'options binding'

4 回答

• 1

  您可以考虑使用ko.applyBindingAccessorsToNode . 这就是我在KO 3.0中开始这样做的方法：

  ko.bindingHandlers.NamedIdOptions = {
      init: function(element, valueAccessor, allBindingsAccessor)
      {
          var injectedBindingValues = {        
              options: valueAccessor,
              optionsValue: function () { return "ID" },
              optionsText: function () { return "Name" }
          };
  
          ko.applyBindingAccessorsToNode(element, injectedBindingValues);
  
          //tell Knockout that we have already handled binding the children of this element
          //
          return { controlsDescendantBindings: true };        
      }
  }
  

  您可以在this fiddle中查看它的运行情况 .

  注意：我通常使用从服务器（C＃，JSON.NET）发送的JSON模式来自动化从C＃属性或数据库模式元数据中填充UI中的选项 . 我提炼了我的代码并对其进行了更改以匹配OP对问题的连续性所做的事情 . 但是如果对JSON模式技术有任何兴趣，那就打击我吧，我可以发布它 .

  回复于 2024-05-04T23:38:40+08:00
• 2

  好的 - 我最后还是将节点绑定应用于节点：

  ko.bindingHandlers.NamedIdOptions =
  {
      init: function (element, valueAccessor, allBindingsAccessor, viewModel)
      {
         var allBindings = allBindingsAccessor();
         var newBindingOptions = { options: allBindings.NamedIdOptions, optionsText: "Name", optionsValue: "ID" };
  
         delete allBindings.NamedIdOptions;
         ko.utils.extend(newBindingOptions, allBindings);
  
         ko.applyBindingsToNode(element, newBindingOptions, viewModel);
      }
  };
  

  它似乎按预期工作 - 我对值和selectedOptions有点不确定 - 它们有'after'设置为选项 . 我想在绑定值之前编写NamedIdOptions时我是安全的吗？

  回复于 2024-05-04T23:38:40+08:00
• 0

  转发呼叫时，你不能伪造整个allBindingsAccessor参数吗？

  update: function (element, valueAccessor, allBindingsAccessor, viewModel)
  {
      var allBindings = allBindingsAccessor(),
          fakeAllBindingsAccessor = function () {
              // I've used jQuery.extend here, you could also manually add the properties to the allBindings object
              return $.extend(true, allBindings, {
                  optionsValue: 'ID',
                  optionsText: 'Name'
              };
          };
      return ko.bindingHandlers.options.init.call(this, element, valueAccessor, fakeAllBindingsAccessor, viewModel);
  }
  

  编辑：添加了一些代码，将现有的allBindingsAccessor与手动伪绑定相结合

  回复于 2024-05-04T23:38:40+08:00
• 3

  我最终得到了以下解决方案，它也允许制作简单的dependendt过滤器 - 它使用下划线，但这只是为了方便：

  // NamedIdOptions - is basically equal to the options binding - except, optionsText="Name", and "optionsValue='ID'"
  // The options can be filered - Specifying optionsFilter: {'FilterProp' : 'valueToBeMatched', 'FilterProp2' : VMpropToMatch, .. }
  // Definig optionsFilterCallback, registers a callback which will be invoked with the matched elements
  // which can be used to turn off elements etc.
  ko.bindingHandlers.NamedIdOptions =
  {
  init: function (element, valueAccessor, allBindingsAccessor, viewModel)
  {
      var allBindings = allBindingsAccessor(),
          appliedValueAccesor = valueAccessor(),
          shownOptions = appliedValueAccesor,
          unwrap = ko.utils.unwrapObservable;
  
      if (allBindings.optionsFilter)
      {
          shownOptions = ko.computed(function ()
          {
              // First  - find all items to be presented in the list
              var allItems = unwrap(appliedValueAccesor);
  
              // Extract items to match against
              // it is ensured that the computed observable dependts on all its sub properties
              // All items are matched by key into an array 
              // if the match is null, undefined, or an empty array, it is not included int the match
              var matchItems = {};
              _.each(_.keys(allBindings.optionsFilter), function (key)
              {
                  var observedValues = unwrap(allBindings.optionsFilter[key]);
                  if (!observedValues)
                      return;
  
                  if (!_.isArray(observedValues))
                      observedValues = [observedValues];
  
                  matchItems[key] = observedValues;
              });
  
              // Find items that match the items above - uses ko own routine to do so
              var matchedItems = _.filter(allItems, function (elm)
              {
                  return _.all(_.keys(matchItems), function (key)
                  {
                      var match = _.contains(matchItems[key], elm[key]);
                      return match;
                  });
              });
  
              // if a callback is defined - call it with the matched items
              if (allBindings.optionsFilterCallback)
                  allBindings.optionsFilterCallback(matchedItems);
  
              return matchedItems;
          }, this);
      }
  
      // Change the binding options - the already handled items should not be reapplied to the node
      // NOTE: it would be preferable to use 'ko.3.0->applyBindingAccessorsToNode' instead of the hack below
      // It assumes that the order of dictionaries are not changed - it works, but is not complient with the Ecmascript standard
      var newBindingOptions = { options: shownOptions, optionsText: "Name", optionsValue: "ID" };
      var bindingKeys = _.keys(allBindings);
      var handledItems = _.first(bindingKeys, _.indexOf(bindingKeys, "NamedIdOptions") + 1);
      _.each(handledItems, function (item)
      {
          delete allBindings[item];
      });
  
      _.extend(newBindingOptions, allBindings);
  
      ko.applyBindingsToNode(element, newBindingOptions, viewModel);
  }
  };
  

  回复于 2024-05-04T23:38:40+08:00