KnockoutJS - 带参数的自定义绑定

Question

我正在尝试为一些JavaScript“渲染”函数编写自定义的敲除绑定，以便我可以执行以下操作：

<td data-bind="numeral('0%'): interest">

在幕后，这个假设的数字会做如下：

ko.bindingHandlers.numeral(fmt) = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContent) {
    var unwrapped = ko.unwrap(valueAccessor()), allBindings = allBindingsAccessor();
    $(element).html(numeral(unwrapped).format(fmt));
  }
} 

我给了这个定义一个go，JavaScript真的不喜欢我试图在数字键上抽象。 我应该如何处理这个问题？

Answer 1

这里提供的答案是很好的技巧，但淘汰实际上有一种方法可以做到这一点。

<td data-bind="numeral: {interest: interest, fmt: '0%' }"> 

并在您的自定义绑定中：

ko.bindingHandlers.numeral(fmt) = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContent) {
    var unwrapped = ko.utils.unwrapObservable(valueAccessor());
    // unwrapped.interest... = interest
    // unwrapped.fmt... = fmt ('0%' in this case)

  }
} 

干杯:)

Answer 2

试试这样吧。

<td data-bind="numeral: interest, fmt : '0%'">

和绑定

ko.bindingHandlers.numeral = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContent) {
    var unwrapped = ko.unwrap(valueAccessor()), allBindings = allBindingsAccessor();
    var fmtVal = allBindings.get('fmt') || '0%'; 
    $(element).html(numeral(unwrapped).format(fmtVal));
  }
} 

Answer 3

另一种选择是将自定义数据属性添加到需要绑定的额外参数的元素：

<td data-bind="numeral: interest" data-format="0%">

然后在绑定内部，您可以从元素目标中提取属性的值。

    ko.bindingHandlers.numeral = {
      init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContent) {
           // ... some more code
            var fmtVal = $(element).data("format") || '0%'; 
           // ... do stuff with fmtVal 
    }}

Answer 4

您可以作为自定义绑定对象的参数传递。 就像是：

<td data-bind="numeral: numeralOptions">

在您的viewmodel中对应的对象：

numeralOptions = {
    interest: ko.observable(808),
    format: '0%'
}

然后在自定义绑定中，使用valueAccessor可以访问您需要的任何初始参数。

var myObject = valueAccessor();
myObject.interest();
myObject.format;

Answer 5

您可以按照制作函数或计算的可观察的兴趣来做一些事情，如果它是一个函数，它可以采用一个参数。 然后它将是以下形式：data-bind =“numbers：interest（'0％'）”然后您可以编写绑定处理程序来为您的目的执行渲染js。