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;