在 Knockout 中动态绑定 data-bind 属性答案

【问题标题】：Dynamically bind the data-bind attribute in Knockout在 Knockout 中动态绑定 data-bind 属性
【发布时间】：2017-03-29 05:27:14
【问题描述】：

我想动态绑定 data-bind 属性。

请查看此链接https://jsfiddle.net/km89jfyp/5/

/km89jfyp/5/

【问题讨论】：

您到底想达到什么目标？你有任何错误吗？
@ACOMIT001 我想为某些列和 data-bind="text:CountLabel" 添加 data-bind="numeric:MachineNo"。我需要对表体中的一些值进行四舍五入。
您希望在的情况下会发生什么？ numeric 不是内置绑定，即使它是我也不确定它在附加到 TD 元素时会做什么。
你想在TD的内容中显示你的viewModel的DataType属性吗？如果是这样，请使用 data-bind="text: ..."。要以特殊数字格式格式化机器编号，请查看剔除过滤器或编写自定义“数字”指令
@JasonSpake 如果它是数字，那么我将通过整数或十进制验证文本。例如机器只能是数字（1,2,3等），但如果你取RPM的平均值，那么它将是小数（2360.6869），在这种情况下，我会将小数固定到2位2360.69。希望你明白我想说的。

【解决方案1】：

ko.applyBindingAccessorsToNode 将要应用的绑定名称作为字符串应用，因此您可以使用它来动态应用绑定。您可以在事件中从 javascript 中使用它，也可以进行自定义绑定以在 html 中使用它。自定义绑定可能如下所示：

ko.bindingHandlers.applyBinding = {
  init: function(element, valueAccessor, allBindingsAccessor, data, bindingContext) {
    var bindingName = ko.unwrap(valueAccessor()); 
    var target = ko.unwrap(allBindingsAccessor().bindingTarget);
    if (bindingName) {
      var binding = {};
      binding[bindingName] = function() {
        return target;
      };

      ko.applyBindingAccessorsToNode(element, binding, bindingContext);
    }
  }
}

您可以在如下绑定中使用它：<span data-bind="applyBinding: MyBinding, bindingTarget: myValue"></span>

你的代码仍然给我留下了很多问题，所以我不能确定这对你有用。您链接的示例除了绑定之外还有很多问题，因此我必须做出一些假设来修复错误并使其正常工作，但这里有一个基于您的代码的示例：jsFiddle

【讨论】：

,这里没有分享完整的代码和逻辑。我是根据用户选择字段列动态绑定表头和表体。我将根据最终用户选择的内容绑定行和正文。例如，如果最终用户选择文本列（Name.Addr 等）然后他选择数字列（年龄、邮政编码、电话等），然后选择十进制字段（工资和其他一些十进制字段）。我也会显示他是否活跃，不活跃为图标。所以我想在 Knockout 中存档类似的东西。那么如何动态设置 data-bind="text:/Numeric/numerictext"
是的。当时我的回答是否有帮助，或者您在将其调整为您的代码时遇到了问题？
#jason，它没有解决我的问题。检查此链接jsfiddle.net/swvo7u00/3
@Avi 您正在尝试将数字绑定应用于文本值，所以是的，这是行不通的。您期望在值为“tester”的数字列中发生什么？
我将同时拥有文本和数字绑定。如何动态地做到这一点

【解决方案2】：

更新了逻辑以包含数字和文本。 https://jsfiddle.net/swvo7u00/4/

 ko.bindingHandlers.numericText = {
init: function (element, valueAccessor, allBindingsAccessor) {
    //element -> value
    ko.utils.registerEventHandler(element, "change", function () {
        var target = valueAccessor();
        var newValue = $(element).val();
        if (ko.isObservable(target)) { target(newValue); } else { target = newValue; }
    });
},
update: function (element, valueAccessor, allBindingsAccessor, data, bindingContext) {
    //model -> element
    var value = ko.utils.unwrapObservable(valueAccessor());

    if (typeof value === "number")
    {
        var precision = ko.utils.unwrapObservable(allBindingsAccessor().precision) || 2;

        $(element).text(value.toFixed(precision));
    }
    else
    {
        $(element).text(value);
    }
  }
}

【讨论】：