0

有人可以查看下面的代码并告诉我为什么在访问 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();
});

谢谢。

4

2 回答 2

0

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

似乎 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();
});
于 2013-03-17T21:12:28.690 回答
0

我相信这与您加载路由器的方式有关tpl.loadTemplates()。我在 jsfiddle 上重新创建了这个问题，当你转到显示 url 时问题就消失了：

http://jsfiddle.net/HXE7K/

工作示例：

于 2013-03-17T16:14:11.730 回答