backbone.js: установить фокус на ввод после рендера - PullRequest
Новая
       36

backbone.js: установить фокус на ввод после рендера

6 голосов
/ 09 января 2012

У меня есть модель с 1 входом. Также у меня есть коллекция. Теперь, когда я добавляю модель в коллекцию, я хочу установить фокус на ее ввод. Чтобы быть точным, мне нужно установить фокус на входе только что созданной модели.

Однако я не могу заставить его работать. Вот моя функция, которая добавляет представление модели в представление коллекции: 

addOne: function(InvoiceItem) {
    var view = new InvoiceItemView({model: InvoiceItem});
    this.$('tr[data-id="'+InvoiceItem.get('after')+'"]').after(view.render().el);
    this.$('tr[data-id="'+InvoiceItem.cid+'"]').css('background', 'green');
    this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus();
},

Проблема в том, что третий вызов: this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus(); ничего не делает. И это странно, потому что кажется, что я могу выполнять манипуляции с DOM только для корневого элемента tr и ничего кроме этого.

Мне кажется, что jQuery не знает, что элемент существует, что странно, потому что когда я делаю alert(this.$('tr[data-id="'+InvoiceItem.cid+'"] input').length), я получаю 1, что указывает на то, что элемент существует.

Что я здесь не так делаю?

Ответы [ 3 ]

20 голосов
/ 26 апреля 2012

Использование _.defer устранило мою проблему: 

var $this = this;
_.defer(function(){
  $this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus();
});
2 голосов
/ 09 марта 2012

У меня была проблема, очень похожая на вашу, и я оказался здесь во время поиска решения.Ваш пост был несколько месяцев назад, поэтому вы, вероятно, прошли мимо этого, но, надеюсь, это поможет кому-то еще.Я смог решить проблему, используя jQuery's ready обработчик функций .Я всегда думал, что его можно использовать только на document, но вы можете использовать его и на подузлах.Попробуйте это: 

addOne: function(InvoiceItem) {
  var view = new InvoiceItemView({model: InvoiceItem});
  $('tr[data-id="'+InvoiceItem.get('after')+'"]').ready(function(){
    $('tr[data-id="'+InvoiceItem.cid+'"]').css('background', 'green');
    $('tr[data-id="'+InvoiceItem.cid+'"] input').focus();
  });
  $('tr[data-id="'+InvoiceItem.get('after')+'"]').after(view.render().el);
2 голосов
/ 09 января 2012

вместо this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus();

попробуйте это 

$(view.render().el).find('input').focus();
...