Событие jQuery DOM не работает в Backbone View

У меня есть представление, что каждый раз, когда вызывается, повторно отображает элементы в представлении, вот фрагмент кода:

Project.Views.CheckinScheduledView = Backbone.View.extend({
tagName: 'div',
id:'CheckinScheduledView',
className:'section',
checkinsHtml: '',

initialize: function() {
    _.bindAll(this);

    this.checkinsCollections = new Project.Collections.Checkins();

    this.checkinsCollections.on('reset', this.render);
    this.checkinsCollections.fetch();
},

events: {
    'click .scheduled_checkin a':'deleteCheckin'
},

render: function() {
    var that = this;

    // HERE IS THE PROBLEM
    if($('li.scheduled_checkin').length) {
        $('li.scheduled_checkin').each(function() {
            $(this).css('display','none').empty().remove();
        });
    }



    if(Project.InfoWindow.length) {
        Project.InfoWindow[0].close();
    }

    _.each(this.checkinsCollections.models, function(item) {
        that.renderLocation(item);
    });

    $(this.el).html(this.template());
    this.renderCheckins();
    return this;
},

refreshData: function() {
    this.checkinsCollections.fetch();
}

это случай:

  1. открыть домашнюю страницу
  2. нажмите checkIn (текущий код просмотра)
  3. вернуться домой
  4. рендеринг вида, но добавляет элементы в список

изображений

Первый раз загружаю представление первый раз загружаю представление

скажем, я перехожу в другое представление, а теперь я возвращаюсь к этому представлению скажем, что я перехожу к другому представлению, и теперь  я возвращаюсь к этому виду

и снова :( и еще раз


person Rommel Castro    schedule 04.03.2013    source источник
comment
Можете ли вы добавить jsfiddle / jsbin?   -  person alonisser    schedule 04.03.2013
comment
Кстати, вероятно, `$ ('li.scheduled_checkin'). Remove ()` также будет работать, поскольку он имеет неявную итерацию, как в здесь   -  person alonisser    schedule 04.03.2013
comment
@alonisser, я пробовал это и не сработает, вот jsfiddle jsfiddle.net/rommelxcastro/Pnwp8   -  person Rommel Castro    schedule 04.03.2013
comment
извините, бровь, скрипка бесполезна, так как вы не предоставляете HTML. я предполагаю, что у вас либо есть опечатка в имени класса, поэтому функция each не запускается. или этот рендер не называется   -  person alonisser    schedule 04.03.2013
comment
@alonisser, если вы видите строку 43, вы можете увидеть, где я создаю html;)   -  person Rommel Castro    schedule 04.03.2013
comment
Где должны быть элементы li.scheduled_checkin? Где-нибудь в DOM или в el представления?   -  person mu is too short    schedule 05.03.2013
comment
@muistooshort li.scheduled_checkin - это те поля, которые говорят NEW, в основном это та же модель   -  person Rommel Castro    schedule 05.03.2013
comment
Вы имеете в виду ту же точку зрения? Вы пробовали использовать this.$(...) вместо $(...) для локализации поиска в el представления? Использование $(...) предполагает, что то, что вы хотите, уже находится в DOM, и это может быть не так внутри вызова Backbone render.   -  person mu is too short    schedule 05.03.2013
comment
@muistooshort, я забываю упомянуть, если я создаю console.log ($ (this)) внутри each (function () {}), я могу видеть элементы в консоли, но remove () / empty () / hide () не работает   -  person Rommel Castro    schedule 05.03.2013
comment
@RommelCastro Я ошибся, извините, в скрипке нет опечатки и Html - и вы ответили на @muistooshort, я полагаю, что функция рендеринга вызывается каждый раз (не так ли? Потому что я подозреваю, что проблема в части инициализации, и если она не вызывается каждый раз, чтобы это доказать). может быть, это что-то простое, как замена $(this) на $.el.remove(), как показывает большинство тусовок?   -  person alonisser    schedule 05.03.2013


Ответы (1)


Из вашего jsfiddle без рабочего примера HTML в этой функции:

renderLocation: function(location) {
    this.checkinsHtml = this.checkinsHtml+'<li class="scheduled_checkin"><a data-id="'+location.attributes.scheduleId+'" href="#/checkin/" title="Delete: '+location.attributes.description+'">'+location.attributes.title+'</a></li>';
}

Я предполагаю, что вы забыли сбросить this.checkinsHtml при повторном рендеринге представления.

Изменить. Для удобства визуализации HTML следует использовать из шаблона.

Пример использования Mustache.js

var template = '{{#models}}' +
               '<li class="scheduled_checkin">' +
                   '<a data-id="{{attributes.scheduleId}}" href="#/checkin/" title="Delete: {{attributes.description}}">{{attributes.title}}</a>' +
               '</li>' +
               '{{/models}}';
$('#scheduled_checkins .two-columns').html(Mustache.render(template, this.checkinsCollections));
person Natthakit Susanthitanon    schedule 06.03.2013
comment
Я нашел это решение несколько минут назад, я хотел ответить на вопрос, и я увидел ваш ответ, и да, это решило проблему, спасибо! - person Rommel Castro; 07.03.2013