0

私はBackboneを使用してRESTfulAPIのフロントエンドを作成しています...そしてこれまでのところ本当に楽しんでいます。このフレームワークを学ぶことは、引き続き非常に興味深いものです。しかし、私は今、少なくとも私にはそれが簡単であるべきだと思われる何かに困惑しています。

これで、1つ以上の製品をリストするメインアプリケーションが存在する単一の（そして唯一の）htmlページができました。そして、それがここにあるとしましょう：http://localhost/index.html

製品リストビューから新しい製品ビューに切り替えられるようにしたいと思います（上部のボタンのクリックイベントを介して）。そして、私が理解していることから、Backbone.jsを使用してビューを切り替える方法で説明されているパターンを使用して切り替えるためにルーターを使い始める必要があります。

  1. この動作を実現するために必要なビューの切り替えはありますか？
  2. これはおかしなことに見えます： 

    http://localhost/index.html#product/new

    また、APIと静的コンテンツの両方のWebサーバーとして[tornado]（http://tornadoweb.org）を使用しているため、書き換えルールを簡単に実装することはできません。近い将来、静的コンテンツにnginxを使用するように切り替える可能性がありますが、まだ切り替えていません。（CRUD操作の） R eviewからCreateに移行するときのように、ルーターを使用してビューを切り替える場合、 URL / URIを変更して、これに沿ったものに見えるようにするにはどうすればよいですか？

    http://localhost/product/new
4

2 に答える 2

3

ハッシュレスURLの変更を受け取るには、ブラウザがpushstateをサポートしている必要があります。私が間違っていなければ、ブラウザがpushstateをサポートしていない場合、Backboneはハッシュの使用にフォールバックします。アプリケーションでpushstateを使用するには、ルーターを次のように初期化します。

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

@alexanderbによるビュー切り替えの使用が好きです。ビューを変更するときは、ビューを適切に破棄するようにしてください。そうしないと、デバッグが難しいいくつかの複雑な問題が発生します。詳細はこちらをご覧ください。

于 2012-09-03T14:33:54.757 に答える
1

はい、2つのものが必要です-ルーターとApplicationViewManager（ビューの変更を担当するクラス）。

define(function () {

var ViewManager = function () {
    return {
        show: _showView
    };
};

function _showView(view) {
    if (this.currentView) {
        this.currentView.close();
    }

    this.currentView = view;
    this.currentView.render();

    $("#app").html(this.currentView.el);
}

return ViewManager;

}）;

ルーターでは、次のようなことを行います。

// router
var ApplicationRouter = Backbone.Router.extend({

    initialize: function () {
        this.viewManager = new ViewManager();
    },

    routes: {
        '': 'dashboard',
        'configure/sites/:id': 'configure'
    },

    dashboard: function () {
        var app = require('./apps/DashboardApp');
        app.run(this.viewManager);
    },

    configure: function (id) {
        var app = require('./apps/ConfigureApp');
        app.run(id, this.viewManager);
    }

});

いくつかのコード例は、このリポジトリから取得できます。

于 2012-09-03T08:32:09.097 に答える