4

バックボーン アプリケーションの出発点として、coenraets のEmployee Directoryを使用しています。最初にやりたいことは、ルーティングを変更して、hash-hash bang-bangs の代わりに HTML5 PushState を使用することです。

最初に私は変更しました：

<ul class="nav">
  <li class="active"><a href="/">Home</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

それで：

Backbone.history.start({ pushState: true });

Navbarをクリックしたか、URL を手動で入力したかに関係なく、localhost:8000/contacts代わりに404 エラーが表示されます。localhost:8000/#/contacts

私は何か間違ったことをしていますか？ありがとう。

更新: このコードを追加しましたが、[stateful]リンクをクリックすると正常に動作するようになりました。しかし、私がいる間にページを更新すると、localhost:8000/contactsまだ 404 エラー[stateless]が表示されます。

$(document).on('click', 'a:not([data-bypass])', function(e){
  href = $(this).prop('href')
  root = location.protocol+'//'+location.host+'/'
  if (root===href.slice(0,root.length)){
    e.preventDefault();
    Backbone.history.navigate(href.slice(root.length), true);
  }
});

更新 2

上記のコードに加えて、Express.js アプリに次のルートを追加しました。よく見ると、URL バーが からlocalhost:3000/#contactに変わってlocalhost:3000/contactいることがわかりますが、これはかなり速い速度で行われます。もっと良い方法があるかもしれませんが、当面はこの方法で満足しています。

app.get('/contact', function(req, res) {
  res.redirect('/#contact');
});
4

2 に答える 2

2

html ファイルが 1 つだけあるとします。すべてのルートで同じ html ファイルを表示するには、次のようなものを使用する必要があります。

app.configure(function () {

  // static files
  app.use(express.static(__dirname + '/public'));

  // default html file (with any request)
  app.use(function (req, res) {
    var contents = fs.readFileSync(__dirname + '/public/index.html');
    res.send(contents.toString());
  });

});

あなたにとって役に立つかどうかはわかりません。それは私のためでした。

于 2013-08-31T23:44:45.573 に答える
0

いいえ、Update 2 では最適な方法ではない可能性があります。

私たちが行っているのは単一ページのアプリケーションであるため、必要なことは次のとおりです。

サーバー側: http://yourdomain.com/whatever
の ようなリクエストの場合、ページを返すだけです。 index

フロントエンド:
何もありません。バックボーンはそれを自動的に処理し、URL http://yourdomain.com/whateverをhttp://yourdomain.com/#whatever自動に変更します。を使用しているため{pushstate: true}、バックボーンはそれをhttp://yourdomain.com/whateverに変更して、ユーザーが見られるようにします。これらはすべて透過的に行われます。
(フロントエンドで行う必要があるのは、リンクの を削除することだけです#。url)

于 2014-03-17T03:48:02.290 に答える