Как замаскировать текстовое поле ввода, которое привязано к вычисляемой переменной Knockout

Я использую jquery MASKED INPUT PLUGIN для маскировки моих полей ввода, которые привязаны к данным нокаутные переменные. У меня проблема с маскировкой, если нокаутирующая переменная является вычисляемой переменной.

Вот ссылка Fiddler 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()». Но что делать с вычисляемыми переменными. Как их замаскировать.


html jquery computed-observable knockout.js maskedinput
person Himanshu Dhiman    schedule 17.09.2015    source источник
comment
просто вам нужно динамически добавлять .mask к динамически генерируемым элементам, проверьте здесь jsfiddle.net/supercool/2h1f18qo/7< /а>   -  person super cool    schedule 17.09.2015
comment
или просто установите обработчик событий для события изменения текстового поля и замаскируйте его там   -  person Scott Selby    schedule 18.09.2015
comment
@supercool: Спасибо .. это сработало ... Теперь я добавляю .mask при привязке нокаутирующего клика ..   -  person Himanshu Dhiman    schedule 18.09.2015
comment
@ScottSelby: я попытался установить привязку события щелчка, и это сработало, но для привязки других событий это не так. Я поставил focusin и попытался предупредить сообщение, но ничего не получил. 1   -  person Himanshu Dhiman    schedule 18.09.2015
comment
используйте $parent в html, чтобы запустить событие   -  person super cool    schedule 18.09.2015
comment
@supercool: Хорошо, я понял ... как только я попал внутрь foreach div, я потерял родительскую область ... поэтому мне нужно упомянуть об этом ... Спасибо ..   -  person Himanshu Dhiman    schedule 18.09.2015
comment
@supercool: Да, конечно, нет проблем, сэр .. :) Если вы не возражаете, могу ли я получить ваш адрес электронной почты .. у меня обычно много глупых сомнений, и мне нужен некоторый опыт для спасения. Пожалуйста, оставьте ссылку на вашу электронную почту по адресу [email protected]. Спасибо   -  person Himanshu Dhiman    schedule 18.09.2015

Ответы (1)


arrow_upward
1
arrow_downward

одним из способов было бы использование trigger для добавления .mask при создании нового элемента

Код:

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

рабочий пример с вашим кодом здесь

другим простым способом было бы под вашим событием ko click добавить .mask к имени класса, убедитесь, что вы поддерживаете один и тот же класс для всех элементов, поддерживающих маску, таких как здесь

person super cool    schedule 18.09.2015