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

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

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)

  }
}

并在您的自定义绑定中：

{{1}}

干杯：）

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 =“数字：兴趣（'0％'）” 然后，您可以编写绑定处理程序来为您的目的执行渲染js。

KnockoutJS - 带参数的自定义绑定

5 个答案: