如何屏蔽数据绑定到Knockout计算变量的输入文本框 [英] How to masked an input text box which is data-bound to Knockout computed variable

问题描述

我使用jquery 蒙面输入插件掩盖我的输入框，这些数据是数据结合淘汰变数。
如果knockout变量是Computed Variable，我在掩码方面存在问题。

这里是Fiddler Link https://jsfiddle.net/himanshudhiman/2h1f18qo/5/

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

ViewModel

  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 /> 
来自可观察阵列的水果
< div data-bind =foreach：listOfkeyValue> 
< input class =inputboxofEachFruitdata-bind =value：ID/> 
< / div> 
< br /> 
< span style =color：Red;> Fruits From computed variable< / span> 
< div data-bind =foreach：SelectById> 
< input class =inputboxofSelectedFruitdata-bind =value：ID/> 
< / div> 
  

我有一个想法，我需要将动态创建的变量绑定到掩码的属性，在self.listOfkeyValue（）中推入新元素后，在self.CreateNewFruit（）中。但是如何处理计算变量。如何屏蔽它们。

解决方案

一种方法是使用触发器来在创建新元素时添加 .mask

代码：

（click，function（）{
$（。one）。

  $（＃cool）。掩码（9999）; //具有相同类名的动态元素get的掩码
}）; 
 $（＃cool）。trigger（click）; 
  

使用您的代码工作示例 here 其他简单的方法将在您的在类名上单击事件添加 .mask 确保您在可屏蔽元素（如 ：

I am using jquery MASKED INPUT PLUGIN for masking my input boxes which are data-binded to knockout variables. I have problem in masking if the knockout variable is Computed Variable.

Here is the Fiddler Link https://jsfiddle.net/himanshudhiman/2h1f18qo/5/

I am able to mask input boxes of observable array. But I don't get masking option for the input box of Computed Variable(i.e here in my code is "self.SelectById()").

ViewModel

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>

I have an idea that, i need to bind dynamically created variables to mask's property and i have done that in "self.CreateNewFruit()" after pushing new element in "self.listOfkeyValue()". But what to do with Computed Variables. How to mask them.

解决方案

one way would be using trigger to add .mask when ever new element is created

Code:

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

working sample with your code here

other simple way would be under your ko click event add .mask on class name make sure you maintain same class across mask-able elements like here

这篇关于如何屏蔽数据绑定到Knockout计算变量的输入文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！