Question

有人可以查看下面的代码，让我知道为什么在访问domain.com/#issue/1时会显示默认操作，而不是列表？但是当点击点击元素并且网址更改为＃issue / 1时，它确实有效。

// Destroy Views
Backbone.View.prototype.close = function () {
    console.log('Closing view ' + this);
    if (this.beforeClose) {
        this.beforeClose();
    }
    this.remove();
    this.unbind();
};

// Backbone Router
var AppRouter = Backbone.Router.extend({

    initialize:function () {
        $('#header').html(new HeaderView().render().el);
    },

    routes:{
        "issue/add":"addIssue",
        "issue/:id":"viewIssue",
        "":"list",
    },

    list:function () {
        this.before(function () {
            console.log('test');
            this.issueList = new IssueCollection();
            this.issueListView = new IssueListView({model:this.issueList});
            this.issueList.fetch();
            app.showView('#content', new IssueListView({model:this.issueList}));
        });
    },

    viewIssue:function (id) {
        console.log(id, app.issueList);
        this.before(function () {
            var issue = app.issueList.get(id);
            app.showView('#content', new IssueView({model:issue}));
        });
    },

    addIssue:function () {
        this.before(function () {
            app.showView('#content', new IssueView({model:new Issue()}));
        });
    },

    showView:function (selector, view) {
        if (this.currentView)
            this.currentView.close();
        $(selector).html(view.render().el);
        this.currentView = view;
        return view;
    },

    before:function (callback) {
        if (this.issueList) {
            if (callback) callback();
        } else {
            this.issueList = new IssueCollection();
            this.issueListView = new IssueListView({model:this.issueList});
            this.issueList.fetch();
            $('#content').html(this.issueListView.render().el);
        }
    }

});

tpl.loadTemplates(['header', 'issue-details', 'issue-item', 'issues-list'], function () {
    app = new AppRouter();
    Backbone.history.start();
});

感谢。

Answer 1

我认为这与您使用tpl.loadTemplates()加载路由器的方式有关。我在jsfiddle上重新创建了这个问题，当你去show url时，问题就消失了：

http://jsfiddle.net/HXE7K/

工作示例：

Answer 2

通过执行以下操作解决了这个问题：

看来tpl.loadTemplates与它无关，而是与回调一起执行.before函数的方式。

// Destroy Views
Backbone.View.prototype.close = function () {
    console.log('Closing view ' + this);
    if (this.beforeClose) {
        this.beforeClose();
    }
    this.remove();
    this.unbind();
};

// Backbone Router
var AppRouter = Backbone.Router.extend({
    initialize:function () {


        $('#header').html(new HeaderView().render().el);
    },

    routes:{
        "issue/add":"addIssue",
        "issue/:id":"viewIssue",
        "":"list",
    },

    list:function () {
        console.log('List Route');
        this.before(function () {
            this.issueList = new IssueCollection();
            this.issueListView = new IssueListView({model:this.issueList});
            this.issueList.fetch();
            app.showView('#content', new IssueListView({model:this.issueList}));
        });
    },

    viewIssue:function (id) {
        console.log('View Issue Route ' + id);
        this.before(function () {
            var issue = app.issueList.get(id);
            app.showView('#content', new IssueView({model:issue}));
        });
    },

    addIssue:function () {
        console.log('Add Issue Route');
        this.before(function () {
            app.showView('#content', new IssueView({model:new Issue()}));
        });
    },

    showView:function (selector, view) {
        if (this.currentView)
            this.currentView.close();
        $(selector).html(view.render().el);
        this.currentView = view;
        return view;
    },

    before:function (callback) {
        if(!this.issueList) {
            this.issueList = new IssueCollection();
            this.issueListView = new IssueListView({model:this.issueList});
            this.issueList.fetch({
                success: function(coll, resp) {
                  if(callback) {
                    callback();
                  }
                }});
        } else {
            if(callback) {
                callback();
            }
        }
    }

});

tpl.loadTemplates(['header', 'issue-details', 'issue-item', 'issues-list'], function () {
    app = new AppRouter();
    Backbone.history.start();
});

骨干路由器问题 - 通过URL访问时不会加载特定操作

2 个答案: