KnockoutJS - 带参数的自定义绑定答案

【问题标题】：KnockoutJS - Custom Bindings with argumentsKnockoutJS - 带参数的自定义绑定
【发布时间】：2013-11-28 07:33:34
【问题描述】：

我正在尝试为一些 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));
  }
}

我试了一下这个定义，JavaScript 真的不喜欢我尝试对数字键进行抽象。我应该如何解决这个问题？

【问题讨论】：

标签： javascript knockout.js

【解决方案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)

  }
}

干杯:)

【讨论】：

这实际上是这个问题的最佳答案。
感谢您添加此答案，即使是在事实发生两年后。这是很好的功能，完全符合我的需求。
很好的答案，我只想补充一点，您可能还想解开每个绑定。通过这种方式，您可以将其绑定到可观察对象或表达式。前任。 var interset = ko.utils.unwrapObservable(unwrapped.interest)

【解决方案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));
  }
}

【讨论】：

谢谢，使用多个绑定作为命名参数非常巧妙。
虽然此解决方案有效，但我认为利用 allBindings.get() getter 检索用于另一个自定义绑定的参数的值是一种误导。这实质上意味着您有一个名为 fmt 的绑定，但不一定如此。看看下面的替代解决方案。
这对我来说就是这样 var dateFormat =allBindingsAccessor().fmt || 'MM/DD/YYYY';我在 allBindings.get('fmt') .get 方法上遇到错误

【解决方案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 
    }}

【讨论】：

【解决方案4】：

您可以将对象作为自定义绑定的参数传递。比如：

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

在您的视图模型中对应的对象：

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

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

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

【讨论】：

【解决方案5】：

您可以按照创建一个函数或计算 observable 的方式来做一些事情，称为兴趣，如果它是一个函数，它可以接受一个参数。那么它将是以下形式：数据绑定=“数字：兴趣（'0％'）” 从这里你可以编写绑定处理程序来为你的目的渲染 js。

【讨论】：