2

Backboneで動作する単純なマスター/詳細シナリオを取得するのに苦労しています。これがjsfiddleで、コードは以下のとおりです。

問題1：「pushstate」をtrueに切り替えると、このナビゲーションがまったく機能しません。私が本当に望んでいるのは、URLにハッシュ/ポンド記号がないことです。

問題2：ユーザーが/ accommodation / 287のようなURLにアクセスする可能性がありますが、常にホームページに表示されるとは限りません。ルーターを使ってどのように対処しますか？

助けてくれてありがとう！

var AccommodationItem = Backbone.Model.extend({
    defaults: {
        html: "",
        loaded: false
    },
    urlRoot: "/Home/Accommodation/"
});

var AccommodationItemView = Backbone.View.extend({
    tagName: "li",
    template: _.template("<a href='#accommodation/<%= id %>'><%= description %></a>"),
    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

var AccommodationList = Backbone.Collection.extend({
    model: AccommodationItem
});

var DetailView = Backbone.View.extend({
    initialize: function () { },
    render: function () {
        this.$el.html(this.model.get("html"));
    },
    setModel: function (model) {
        this.model = model;
        var $this = this;
        if (!this.model.get("loaded")) {
            /*
            this.model.fetch({ success: function () {
                $this.model.set("loaded", true);
                $this.render();
            }
            });*/
            $this.model.set("html", "<h2>Full item " + this.model.get("id") + "</h2>");
    $this.model.set("loaded", true);
    $this.render();

        } else {
            $this.render();
        }
    }
});

var AccommodationListView = Backbone.View.extend({
    tagName: "ul",
    initialize: function () {
        this.collection.on("reset", this.render, this);
    },
    render: function () {
        this.addAll();
    },
    addOne: function (item) {
        var itemView = new AccommodationItemView({ model: item });
        this.$el.append(itemView.render().el);
    },
    addAll: function () {
        this.collection.forEach(this.addOne, this);
    }
});

var App = new (Backbone.Router.extend({
    routes: {
        "": "index",
        "accommodation/:id": "show"
    },
    initialize: function () {
        this.detailView = new DetailView({ model: new AccommodationItem({ id: 1 }) });
        $("#detail").append(this.detailView.el);
        this.accommodationList = new AccommodationList();
        this.accommodationListView = new AccommodationListView({ collection: this.accommodationList });
        $("#app").append(this.accommodationListView.el);
    },
    start: function () {
        Backbone.history.start({ pushState: false });
    },
    index: function () {
        this.fetchCollections();
    },
    show: function (id) {
        var model = this.accommodationList.get(id);
        this.detailView.setModel(model);
    },
    fetchCollections: function () {
        var items = [{ id: 1, description: "item one" }, { id: 2, description: "item two" }, { id: 3, description: "item three" }];
        this.accommodationList.reset(items);
    }
}));
$(function () {
    App.start();
});

編集：以下のコメントで、Codeschoolbackbone.jsチュートリアルについて言及しました。これでコースの両方の部分が終了し、受け入れられた回答で説明されているAppViewパターンを正確にカバーしていると言いたいだけです。素晴らしいコースで、私はそれを徹底的にお勧めします。

4

1 に答える 1

3

いくつかの概念が混同されています。

ここで説明するには多すぎるので、意図したとおりに機能するコードのパッチを（非常に大まかに）まとめました。私はあなたがそれをあなた自身のものと並べて置いて、私が異なって何をしたかを見ることを勧めます。

http://jsfiddle.net/wtxK8/2

いくつかのこととして、ルーター内からBackbone.historyを初期化しないでください。'init'は次のようになります

      $(function () {
        window.app = new App();
        window.appView = new AppView({el:document});
        Backbone.history.start({ pushState: true });
      });

これは、ページ全体を網羅するよりも「ラッパー」ビューを設定しています。また、ルーターのロジックが多すぎます。ルートにはルーターのみを使用するようにしてください。私の簡単な再因数分解の後、あなたのルーターはこれだけを含んでいます：

      var App = Backbone.Router.extend({
        routes: {
          "": "index",
          "accommodation/:id": "show"
        },
        show: function (id) {
          var model = window.appView.accommodationList.get(id);
          window.appView.detailView.setModel(model);
        }
      });

（AppView私があなたのために書いたものは、その初期化作業のすべてを実行します。

    var AppView = Backbone.View.extend({
        initialize : function(){
          this.detailView = new DetailView({ model: new AccommodationItem({ id: 1 }) });
          $("#detail").append(this.detailView.el);
          this.accommodationList = new AccommodationList();
          this.accommodationListView = new AccommodationListView({ collection: this.accommodationList });
          $("#app").append(this.accommodationListView.el);
          this.fetchCollections();
        },
        fetchCollections: function () {
          var items = [
            { id: 1, description: "item one" },
            { id: 2, description: "item two" },
            { id: 3, description: "item three" }
          ];
          this.accommodationList.reset(items);
        }
      });

私のリファクターの後でも、それはまだ最適にはほど遠いですが、私はあなたの学習の旅であなたを助けるためにそれをすべて提供しました:)

次に、オンラインチュートリアルのいくつかを段階的に実行して、アプリの構造をより適切に設定できるようにすることをお勧めします。

幸運を祈ります。http：//jsfiddle.net/wtxK8/2をチェックして、機能することを確認してください。

編集：私はあなたの2番目の質問に対処していません。あなたを忙しくさせるために質問1で取り組むのに十分です。後でもっと時間があれば、さらにお手伝いします。

于 2013-03-08T15:14:31.500 に答える