如何屏蔽数据绑定到 Knockout 计算变量的输入文本框答案

【问题标题】：How to masked an input text box which is data-bound to Knockout computed variable如何屏蔽数据绑定到 Knockout 计算变量的输入文本框
【发布时间】：2025-11-28 00:15:02
【问题描述】：

我正在使用 jquery MASKED INPUT PLUGIN 来屏蔽我的输入框，这些输入框是数据绑定到剔除变量的。如果剔除变量是计算变量，我在屏蔽时遇到问题。

这里是提琴手链接https://jsfiddle.net/himanshudhiman/2h1f18qo/5/

我能够屏蔽可观察数组的输入框。但我没有得到计算变量输入框的屏蔽选项（即我的代码中的这里是“self.SelectById()”）。

视图模型

function KeyValuePairOfIdAndName(Name, ID) {
            var self = this;
            self.Name = Name;
            self.ID = ID;
        }

var ViewModel = function () {
    var self = this;
    self.listOfkeyValue = ko.observableArray();
    self.SelectById = ko.computed(function () {
        return ko.utils.arrayFilter(self.listOfkeyValue(), function (Fruit) {
            return Fruit.ID == 1001;
        });
    });
    var count = 1;
    self.CreateNewFruit = function () {

        self.listOfkeyValue.push(new KeyValuePairOfIdAndName("Apple" + count, 999 + count));
        $(".inputboxofEachFruit").mask("9999");
        count = count + 1;

    }

}

$(document).ready(function () {
    var viewModel = new ViewModel();
    ko.applyBindings(viewModel);
    $(".inputboxofEachFruit").mask("9999");
    $(".inputboxofSelectedFruit").mask("9999");
});

HTML

<button data-bind="event: { mousedown: CreateNewFruit }" >Createe Fruit</button>    
<br/>  
Fruits From Observable Array
<div data-bind="foreach: listOfkeyValue" >                            
    <input class = "inputboxofEachFruit" data-bind="value: ID"/>   
</div>
<br/>  
<span style = "color:Red;">Fruits From computed variable</span>
<div data-bind="foreach: SelectById" >                            
    <input class = "inputboxofSelectedFruit" data-bind="value: ID"/>   
</div>

我有一个想法，我需要将动态创建的变量绑定到掩码的属性，并且在“self.listOfkeyValue()”中推送新元素后，我已经在“self.CreateNewFruit()”中完成了该操作。但是如何处理计算变量。如何掩盖它们。

【问题讨论】：

简单你需要动态添加.mask到动态生成的元素中检查这里jsfiddle.net/supercool/2h1f18qo/7
或者只是为文本框更改事件设置一个事件处理程序并将其屏蔽
@supercool：谢谢..它工作了......现在我在淘汰赛点击绑定中添加 .mask..
@ScottSelby：我尝试放置点击事件绑定并且它有效，但对于其他事件绑定它没有。我把焦点放在并试图提醒一条消息但什么也没得到.. Fiddler jsfiddle.net/himanshudhiman/pnx0du61/1
在 html 中使用 $parent 来触发事件

标签： jquery html knockout.js maskedinput computed-observable

【解决方案1】：

一种方法是在创建新元素时使用trigger 添加.mask

代码：

$("#cool").on("click", function () {
   $(".one").mask("9999"); //dynamic elements with same class name get's mask
});
 $("#cool").trigger("click");

使用您的代码的工作示例here

其他简单的方法是在您的 ko click 事件下添加 .mask 在类名上确保您在可屏蔽元素（如 here

【讨论】：