Knockout.js KnockoutJS绑定与输入掩码混乱

我正在尝试将输入掩码应用于电话字段。在我应用KnockoutJS绑定之前，它一直工作，这会移除掩码，直到字段接收到焦点

不起作用：

作品：

---

我不认为这是一个令人失望的问题，但是屏蔽输入插件的设计方式有一个问题：您的初始值必须符合屏蔽标准。即使您去掉了knockout，只使用jQuery的

val（）

函数将值设置为“1234”，您也会看到相同的行为

更新

抱歉，错过了您的“工作”链接。我打算首先推荐一个定制绑定处理程序。看来这是一条路要走。它在文本通过敲除更新后应用遮罩，然后使用新的遮罩值更新视图模型（如果需要）：

---

这是您更新的fiddle:

我不认为这是一个淘汰问题，但屏蔽输入插件的设计方式存在问题：您的初始值必须符合屏蔽标准。即使您去掉了knockout，只使用jQuery的

val（）

函数将值设置为“1234”，您也会看到相同的行为

更新

抱歉，错过了您的“工作”链接。我打算首先推荐一个定制绑定处理程序。看来这是一条路要走。它在文本通过敲除更新后应用遮罩，然后使用新的遮罩值更新视图模型（如果需要）：

---

这是你最新的提琴：

查看我的“作品”链接。该值的格式不正确，但插件正确地屏蔽了它。在“not works”链接中，如果我要在敲除绑定后将输入掩码js移动到，它将正常工作。添加了一个自定义绑定处理程序以演示如何完成此操作。轻微修改：如果我在init上执行处理程序而不是更新，它处理的情况是，我的ajax结果返回空值，并且没有要执行的绑定。添加处理程序似乎破坏了双向绑定。即使删除更新事件并保留空处理程序，它也不会更新viewmodel。您可以在您的示例中看到，如果您更新值并关闭电话制表符。对不起，迈克。没有init处理程序，就不会连接任何事件处理程序来获取对文本框的更改。我添加了它，现在它可以工作了。检查我的“工作”链接。该值的格式不正确，但插件正确地屏蔽了它。在“not works”链接中，如果我要在敲除绑定后将输入掩码js移动到，它将正常工作。添加了一个自定义绑定处理程序以演示如何完成此操作。轻微修改：如果我在init上执行处理程序而不是更新，它处理的情况是，我的ajax结果返回空值，并且没有要执行的绑定。添加处理程序似乎破坏了双向绑定。即使删除更新事件并保留空处理程序，它也不会更新viewmodel。您可以在您的示例中看到，如果您更新值并关闭电话制表符。对不起，迈克。没有init处理程序，就不会连接任何事件处理程序来获取对文本框的更改。我加了这个，现在就可以了。

$('[data-mask]').each(function () {
    console.log('mask');
    $this = $(this);
    var mask = $this.attr('data-mask') || 'error...', mask_placeholder = $this.attr('data-mask-placeholder') || 'X';

    $this.mask(mask, {
        placeholder: mask_placeholder
    });
})


var ViewModel = function() {
    this.firstName = ko.observable("");
    this.lastName = ko.observable("");
    this.phone = ko.observable("");

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);

    this.firstName('John');
    this.lastName('Doe');
    this.phone('1231231234');
}; 
ko.applyBindings(new ViewModel());

var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);

    this.fullName = ko.computed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
};

ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work

$('[data-mask]').each(function () {
    console.log('mask');
    $this = $(this);
    var mask = $this.attr('data-mask') || 'error...', mask_placeholder = $this.attr('data-mask-placeholder') || 'X';

    $this.mask(mask, {
        placeholder: mask_placeholder
    });
})

ko.bindingHandlers.maskedInput = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.bindingHandlers.value.init(element, valueAccessor, allBindings, viewModel, bindingContext);
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.bindingHandlers.value.update(element, valueAccessor, allBindings, viewModel, bindingContext);
        $(element).mask(allBindings.get('mask'));
        valueAccessor()($(element).val());
    }
};