骨干路由器問題-通過URL訪問時不會加載特定操作

Question

有人可以看下面的代碼，讓我知道為什么在訪問domain.com/#issue/1時為什么顯示默認操作，而不是列表？ 但是當單擊click元素並且URL更改為＃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上重新創建了該問題，當您轉到顯示URL時問題就消失了：

http://jsfiddle.net/HXE7K/

工作示例：

• http://jsfiddle.net/HXE7K/show/
• http://jsfiddle.net/HXE7K/show/#issue/1
• http://jsfiddle.net/HXE7K/show/#issue/add

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();
});