Магистральный вид внутри другого вида с помощью ajax. События не работают

Question

У меня есть вид Backbone. Он загружает контент (компонент на магистрали с AJAX):

        render: function () {
            var self = this;
            $.get('/Blog', request, function (data) {
                self.$el.html(data);
                model.trigger('blogContainerLoaded');
            });
        }

Код компонента:

 window.App = {


init: function (options) {
    var BlogModel = Backbone.Model.extend({
    });

    var model = new BlogModel();

    var BlogController = Backbone.Router.extend({
        routes: {
            "": "posts",
            "posts": "posts",
            "posts/:postId": "post",
            "posts/:postId/": "post",
        },
        posts: function (anchor) {
            window.App.views.posts.render(anchor);
        },
        post: function (postId, commentId) {
            window.App.views.post.render(postId, commentId);
        },
    });

    var controller = new BlogController();
    if (notLoaded) {
        var views = {
            posts: new PostListView({ model: model, controller: controller }),
            post: new PostView({ model: model, controller: controller }),
        };
        this.views = views;
        Backbone.history.start();
    }
}

};

var PostListView = Backbone.View.extend({
el: $(".posts"),
events: {
    "click .js-edit-message": "editMessage",
    "click .js-open-post": "navigateToPost",
    "click .js-move-post": "move"
},
editMessage: function () {
    debugger;
},
navigateToPost: function () {
    debugger;
},
move: function () {
    debugger;
},

Весь HTML-код загружается с помощью AJAX. Работает, но события (щелчки и прочее) не запускаются! Когда я загружаю компонент блога без AJAX - события работают. Пожалуйста помоги!

Answer 1

Скорее всего, ваш взгляд создается до того, как ваш вызов ajax завершится. Поскольку ajax является асинхронным, он загружает (в конце концов) ваш код для инициализации представления. Таким образом, когда ваше представление пытается присоединить события к вашему DOM, необходимые элементы отсутствуют.

Это также объясняет, почему при удалении части AJAX код работает (теперь он синхронный, и DOM присутствует до того, как вы инициализируете код представления).

Попробуйте поместить свой код инициализации в обратный вызов ajax следующим образом: (если возможно)

    render: function () {
        var self = this;
        $.get('/Blog', request, function (data) {
            self.$el.html(data);

            self.blogContainer = new BlogContainerView();  // Or however you do it
        });
    }

Другая возможность состоит в том, чтобы сохранить trigger.('blogContentLoaded') затем прикрепите события в то время. Backbone.View-х delegateEvents() метод может быть полезен в вашем случае.

Или что-то в этом роде. Теперь вы гарантируете, что DOM доступен для вашего объекта View для прикрепления событий.