0

バックボーンで非常に単純なものに問題があります。<h1>ユーザーがページをクリックしたときに、ポストバックなしでシームレスにホームページに戻るように、ページを接続したいと思います。

これはHTMLです：

<h1><a id="home" href="/">Home</a></h1>

（更新：コメンターによって提案されたIDを修正しました。）そしてこれは私のバックボーンビューとルーターです：

var HomeView = Backbone.View.extend({
  initialize: function() { 
    console.log('initializing HomeView');
  },
  events: { 
    "click a#home": "goHome"
  }, 
  goHome: function(e) { 
    console.log('goHome');
    e.preventDefault();
    SearchApp.navigate("/");
  }
});
var SearchApp = new (Backbone.Router.extend({
  routes: { 
    "": "index", 
  },
  initialize: function(){
    console.log('initialize app');
    this.HomeView = new HomeView();
  },
  index: function(){
    // do stuff here
  },
  start: function(){
    Backbone.history.start({pushState: true});
  }
}));
$(document).ready(function() { 
  SearchApp.start();
});

コンソールは私を示しています

initialize  app
initializing HomeView

しかし、をクリックすると、ページが投稿され、コンソールに<h1>表示されません。goHome

私は何が間違っているのですか？明らかに<h1>、jQueryでクリックイベントを簡単に接続できますが、Backboneでどのように実行する必要があるかを理解したいと思います。

4

2 に答える 2

1

pushStateを有効にする場合は、すべてのクリックをインターセプトして更新を防ぐ必要があります。

$('a').click(function (e) {
  e.preventDefault();
  app.router.navigate(e.target.pathname, true);
});

何かのようなもの：

$(document).ready(function(){

  var HomeView = Backbone.View.extend({
    initialize: function() { 
      console.log('initializing HomeView');
    }
  });

  var AboutView = Backbone.View.extend({
    initialize: function() { 
      console.log('initializing AboutView');
    }
  });

  var AppRouter = Backbone.Router.extend({
    routes: { 
      "": "index", 
      "about":"aboutView"
    },

    events: function () {
      $('a').click(function (e) {
        e.preventDefault();
        SearchApp.navigate(e.target.pathname, true);
      });
    },

    initialize: function(){
      console.log('initialize app');
      this.events();
      this.HomeView = new HomeView();
    },

    index: function(){
      this.HomeView = new HomeView();
    },

    aboutView : function() {
      this.AboutView = new AboutView();
    }
  });

  var SearchApp = new AppRouter();
  Backbone.history.start({pushState: true});

});
于 2013-01-07T15:36:36.020 に答える
1

タグidが無効です。次のことを試してください。

<h1><a id="home" href="/">Home</a></h1>
于 2013-01-07T15:39:50.303 に答える