0

なぜこれが機能するのか疑問に思っています：

window.NewListView = Backbone.View.extend({
  template: _.template('<a href="/list" class="button new-list">Create New List</a>'),

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

window.List = new (Backbone.Router.extend({
  routes: { "": "index" },

  initialize: function(){
    this.newListView = new NewListView();
  },

  start: function(){
    Backbone.history.start();
  },

  index: function(){
    $('.lists').append(this.newListView.render().el);
  }
}));

$(function(){ List.start(); })

そして、これはしません：

window.NewListView = Backbone.View.extend({
  template: _.template('<a href="/list" class="button new-list">Create New List</a>'),

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

window.List = new (Backbone.Router.extend({
  routes: { "": "index" },

  initialize: function(){
    this.newListView = new NewListView();
    $('.lists').append(this.newListView.render().el);
  },

  start: function(){
    Backbone.history.start();
  },

  index: function(){

  }
}));

$(function(){ List.start(); })

違いはただ動いている

$('.lists').append(this.newListView.render().el);

ルータのinitialize（）とindex（）の間。

4

1 に答える 1

5

その方法と時期のために、ルーターのインスタンスを作成しています。

あなたがするとき：

window.List = new (Backbone.Router.extend({...

DOMがロードされる前に、ルーターのインスタンスを作成しています。したがって、initialize関数では、jQueryセレクターはノードを返しません。

コンソールを開くと、このjsFiddleでコンソールに記録された操作の順序を確認できます。

http://jsfiddle.net/edwardmsmith/x64hw/

window.NewListView = Backbone.View.extend({
  template: _.template('<a href="/list" class="button new-list">Create New List</a>'),

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

window.List = new (Backbone.Router.extend({
  routes: { "": "index" },

  initialize: function(){
    this.newListView = new NewListView();
    console.log("List Initialize");
    $('.lists').append(this.newListView.render().el);
  },

  start: function(){
    Backbone.history.start();
  },

  index: function(){

  }
}));

$(function(){ 
    console.log("Before List Start");
    List.start(); 
    console.log("After List Start");

})​

結果：

List Initialize
Before List Start
After List Start

ただし、DOMのロード後にルーターインスタンスを作成する場合は、次のようになります。

window.NewListView = Backbone.View.extend({
  template: _.template('<a href="/list" class="button new-list">Create New List</a>'),

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

window.List = Backbone.Router.extend({
  routes: { "": "index" },

  initialize: function(){
    this.newListView = new NewListView();
    console.log("List Initialize");
    $('.lists').append(this.newListView.render().el);
  },

  start: function(){
    Backbone.history.start();
  },

  index: function(){

  }
});

$(function(){ 
    console.log("Before List Start");
    list = new List();                
    list.start(); 
    console.log("After List Start");

})​

順序はあなたが期待する通りであり、それは機能します：

Before List Start
List Initialize
After List Start

このjsFiddleに示されているように：

http://jsfiddle.net/edwardmsmith/eDWfh/

于 2012-05-08T02:55:34.830 に答える