Использование маски jQuery и магистрали

Question

Использование магистрали и requirejs. Я хочу использовать маска ввода. Я помещаю еще одну конструкцию jQuery в представление, и она работает нормально, но маска не отображается в полях телефона. Что я делаю не так? Благодарю.

render: function(){ 
var compiledTemplate = _.template(RegisterTemplate, this.model); 
this.$el.html(compiledTemplate); 

    $("#custphone").mask("(999) 999-9999"); //masks not showing up 
    $("#custphone2").mask("(999) 999-9999"); 
    $("#custzip").mask("99999"); 
    $("#venuezip").mask("99999"); 

    $().acknowledgeinput({    //works fine! 
      success_color: '#00FF00', 
     danger_color: '#FF0000', 
     update_on: 'keyup' 
    }); 

Answer 1

Обычная картина для ввода вида на странице выглядит следующим образом:

var v = new SomeView(); 
$(something).append(v.render().el); 

v.render() вызова добавляет некоторый HTML режим представления el но el не будет на странице, пока append заканчивается, и это происходит после завершения render. Так что если у вас есть render вроде этого:

this.$el.html('<span id="pancakes">Pancakes</span>'); 
var $pancakes = $('#pancakes'); 

тогда $pancakes будет пустым, как #pancakes внутри this.$el, но не на этой странице еще и $('#pancakes') будет выглядеть на странице.

Обратно к вашему коду, я предполагаю, что #custphone и друзья приходят из вашего шаблона. Это означает, что они будут в представлении $el, но не самой странице, когда вы $('#custphone').mask(...); результатом является то, что вы вызываете mask на кучу пустых объектов jQuery.

Вы можете использовать find искать эти элементы в нужном месте:

this.$el.find('#custphone').mask('(999) 999-9999'); 
//... 

или вы можете использовать функцию this.$, что магистральная устанавливает для вас:

$ (JQuery)view.$(selector)

Если jQuery включен на страницу, у каждого вида есть $ Функция, которая запускает запросы в пределах элемента представления. [...] Это эквивалентно запуску: view.$el.find(selector).

Так this.$(x) более или менее короткая форма this.$el.find(x) и вы бы сказали:

this.$('#custphone').mask('(999) 999-9999'); 
//...