0

我正在尝试使用本文中 Derick Bailey 的建议来管理主干中的页面转换，但是 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) {"

  • 未捕获的类型错误：无法在“this.AppView = options.AppView”中读取未定义的属性“AppView”

谢谢。

4

1 回答 1

4

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

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

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

更新

这是一个小提琴

您的家乡路线的问题出在这条线上：

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();
    }
},
于 2013-07-01T18:24:55.320 回答