0

我有主干视图。它加载内容（使用 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 的博客组件时 - 事件工作。请帮忙！

4

1 回答 1

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 对象来附加事件。

于 2012-08-23T17:25:23.540 回答