如何屏蔽數據綁定到Knockout計算變量的輸入文本框

我正在使用jquery MASKED INPUT PLUGIN屏蔽我的輸入框，這些數據綁定到淘汰變量。如果淘汰賽變量是計算變量，我在掩蔽方面存在問題。如何屏蔽數據綁定到Knockout計算變量的輸入文本框

這裏是提琴手鍊接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.CreateNewFruit （）「在」self.listOfkeyValue（）「中推入新元素之後。但是如何處理計算變量。如何掩蓋他們。

來源

2015-09-17 Himanshu Dhiman

你需要動態地添加'.mask'簡單的動態生成的元素在這裏https://jsfiddle.net/supercool/2h1f18qo/7/檢查 –

或只是設置文本框更改事件的事件處理程序，並在那裏掩蓋它 –

@supercool：謝謝..它的工作...現在我添加.mask在淘汰賽點擊綁定.. –

的一種方法是使用trigger添加.mask創建過新元素時

代碼：

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

工作樣本與您的代碼here

等簡單的方法就是根據您的ko click事件在類名mak上添加.mask Ë務必保持整個面罩能夠要素相同的類象here

來源

2015-09-18 12:11:24

如何屏蔽數據綁定到Knockout計算變量的輸入文本框

回答

相關問題