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的情况下加载Blog组件时 - 活动正常。请帮助！

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对象以将事件附加到。

由ajax在其他视图里面的骨干视图。活动无效

1 个答案: