Backbone - 管理页面转换时的问题

Question

我正在尝试使用 Derick Bailey 在此 article 中的建议来管理主干中的页面转换，但 about 路由未呈现。它只用 app.BookListView 渲染 home 路由，当我点击访问 about 路由时，它仍然是 app.BookListView。

这是我的代码：

HTML

<section class="feed">
</section> 
<script id="bookTemplate" type="text/template">

        <div class="book">
        </div>

</script>

 <script id="aboutTemplate" type="text/template">

         <div class="about">
         Bla bla bla bla
         </div>

  </script>

观点

Backbone.View.prototype.close = function(){
   this.remove();
   this.unbind();
};

function AppView(){
    this.showView(view) {

        if (this.currentView){
        this.currentView.close();
        }

        this.currentView = view;
        this.currentView.render();
        $('.feed').html(this.currentView.el);
     }
 };

app.BookView = Backbone.View.extend ({
    tagName: 'div',
    className: 'book', 

template: _.template( $( '#bookTemplate' ).html()),

render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
}
)};

app.BookListView = Backbone.View.extend({
    el: '.feed',
    initialize: function ( initialBooks ) {
        this.collection = new app.BookList (initialBooks);
        this.render();
     },

    render: function() {
         this.collection.each(function( item ){
                this.renderBook( item );
         }, this);
     },

    renderBook: function ( item ) {
         var bookview = new app.BookView ({
              model: item
         })
         this.$el.append( bookview.render().el );
         } 
    });

 app.AboutView = Backbone.View.extend({
     tagName: 'div',
     className: 'about',

     template: _.template( $( '#aboutTemplate' ).html()),

     render: function () {
         this.$el.html(this.template());
         return this;
     }
 });

路由器

var AppRouter = Backbone.Router.extend({
    routes: {
        '' : 'home',
        'about' : 'about'
    },

    initialize: function(options){
        this.AppView = options.AppView;
    },

    home: function () {
         var homeView = new app.BookListView();
    this.AppView.showView(homeView);
    },

    about: function () {
          var aboutView = new app.AboutView();
          this.AppView.showView(aboutView);
    }
});

app.Router = new AppRouter();
Backbone.history.start();

还有一些测试 BookView 的数据：

$(function(){
    var books = [
        {title:'Imperial Bedrooms'},
        {title:'Less than Zero'},
     ];
new app.BookListView (books);

JSFiddle：http://jsfiddle.net/swayziak/xdRRE/

控制台抛出此错误：

• Uncaught SyntaxError: Unexpected token { , in "this.showView(view) {"

• Uncaught TypeError: Cannot read property 'AppView' of undefined , in "this.AppView = options.AppView"

谢谢。

Answer 1

您有语法错误、....错位或缺少字符、未定义的对象。

new app.BookListView (books);

var bookListView  =  new app.BookListView (books);

以下将不起作用：

  this.showView(view) {

    if (this.currentView){…

我猜你想要这个？

this.showView = function(view){…}

以下行也抛出错误：

app.BookView = Backbone.View.extend ({…)};

应该是：

app.BookView = Backbone.View.extend ({…});

下一行工作：

this.AppView.showView(homeView);

你必须在初始化时在这里传递appview：

app.Router = new AppRouter(appView);

我会尝试清理您的小提琴，您使用的是哪种代码编辑器？因为所有错误都与语法有关。

更新

这是fiddle

你家路线的问题出在这一行：

home: function () {
    if(!this.bookListView){
        this.bookListView = new app.BookListView();
    }
},

应该是：

home: function () {
    if(!this.bookListView){
        this.bookListView = new app.BookListView(books);
    }else{
        this.bookListView.render();
    }
},