Question

我目前正在使用Knockoutjs来处理bootstrap模式中的绑定。一切正常，直到我开始在字段中添加输入掩码。例如，我有：

<div class="modal fade" id="cardModal" tabindex="-3" role="dialog" aria-hidden="true" >
<input class="form-control amountmask borderblack" data-val="true" value="11000.89" />
<!-- /.modal-dialog -->

这很好用，它使用AutoNumeric.js，这是通过JQuery应用的：

    <script type="text/javascript">
    $(document).ready(function () {
        // masked edit for dollar amount
        $('.amountmask').autoNumeric('init');
    });
</script>

如果我将Knockoutjs添加到混音中，让模态使用data-bind：

<div class="modal fade" id="cardModal" tabindex="-3" role="dialog" aria-hidden="true" data-bind="with: itemForEditing">
<input class="form-control amountmask borderblack" data-val="true" data-bind="value: Amount" />
<!-- /.modal-dialog -->

绑定工作正常，但输入掩码停止工作。有没有办法解决？如果我删除数据绑定，输入掩码会再次起作用，但我松开了绑定。

Answer 1

您需要做的是创建一个自定义绑定，负责将jQuery插件应用于您的输入。

Knocout doc：Creating custom bindings非常清楚如何做到这一点：

ko.bindingHandlers.yourBindingName = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called when the binding is first applied to an element
    // Set up any initial state, event handlers, etc. here
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called once when the binding is first applied to an element,
    // and again whenever any observables/computeds that are accessed change
    // Update the DOM element based on the supplied values here.
  }
};

正如您可以在评论中看到的那样，您已经实现了这样的方法：

init：应用autoNumeric插件。您可以在此处使用allBindings来访问ko绑定中指定的插件的其他选项，即data-bind属性。
update：如果与此元素关联的视图模型observable属性发生更改，则将调用此方法。您可以决定该怎么做。通常，您使用此方法直接更新输入文本。在您的情况下，我认为autoNumeric提供某种功能来使用适当的掩码更新输入值。这就是你shpuld在这里做的事。

请注意，原始值绑定有两个作用：

在init上，它附加到输入更改事件，这样，当输入值更改时，它会更新绑定的可观察值
只要observable属性发生更改，就会调用update，并使用新值直接更新输入值（text）。

所以，你必须像我解释的那样取代这种行为。这就是为什么它不与你的插件并行工作的原因。顺便说一句，它比你想象自己定制绑定和使用它更容易。

输入掩码不与knockoutjs一起使用

1 个答案: