Question

我正在努力让一个简单的主 - 细节场景与Backbone一起工作。这是jsfiddle，代码如下。

问题1：如果我将“pushstate”切换为true，则此导航根本不起作用。我真正想要的是在我的网址中没有哈希/井号。

问题2：我的用户可能会像/ accommodation / 287这样的网址，而不是总是在主页上。你会如何处理使用路由器？

非常感谢您的帮助！

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();
});

编辑：在下面的评论中，我提到了Codeschool backbone.js教程。只是想说我现在已经完成了课程的两个部分，它完全覆盖了接受的答案中描述的AppView模式。这是一个很好的课程，我完全推荐它。

Answer 1

你有一些混淆的概念。

这里有太多要解释的内容，所以我（非常粗略地）将一段代码整合在一起，按照您的意图运行。我建议你把它与你自己并排放置，看看我做了哪些不同的事情。

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才能看到它正常运作。

编辑：我没有解决你的第二个问题。有足够的问题可以解决问题1，让你忙碌。如果我以后有更多时间，我会进一步帮助。

Backbone.js主 - 详细视图，导航问题（包括jsfiddle）

1 个答案: