0

我刚刚通过为自己创建一个简单的投资组合网站开始使用 Backbone.js。目前没有太多功能，但我希望在熟悉该库后添加更多更多功能。我正在使用 json 来填充站点的数据，该站点要么列出我的所有投资组合项目，要么根据路线显示其中一个。我有工作/显示的投资组合项目列表，但我很难只显示特定路线的一个项目（例如 /#projects/2），这是我需要帮助的地方。

在我开始学习 Backbone 时，我试图让一切尽可能简单，并且看过各种样板和教程，但没有一个对我有很大帮助。

在这些路线上，我希望发生这种情况：

  1. / - 投资组合项目列表
  2. /#projects - 投资组合项目列表
  3. /#projects/3 - 一个投资组合项目

我已将尝试放入 JSbin，但它不起作用，因为我不知道如何正确加载 json...

我确定我的问题出现了，因为我将所有项目加载到集合而不是模型中。那正确吗？

  1. 我怎样才能使这项工作？
  2. 我该如何改进呢？

[编辑 - - - - - - - - - - ]

在下面彼得非常友好的帮助之后，我仍然需要帮助。他说：

一个视图显示 1 个模型，一个集合视图显示一个视图列表，每个模型一个。

那么，如何创建一个视图来显示 json 数据中的一项，然后创建集合视图来显示所有这些？我问的原因是因为我可以毫无问题地退回所有物品，但事实证明退回一件物品非常棘手。

我也更新了我的代码示例：http: //jsbin.com/asezul/8/edit

[ - - - - - - - - - - -编辑]

 

如果您需要更多信息，请告诉我，我是 Backbone 的新手，可能错过了有助于回答我的问题的重要部分。

这是一些代码摘录，但我建议在 JSbin 中查看代码：

该模型：

SITE.Project = Backbone.Model.extend({
    initialize: function() {
        console.log(this, this.attributes.name);
    }
});

收藏：

SITE.Projects = Backbone.Collection.extend({
    model: SITE.Project,
    url: 'content.json',
    parse: function(response) {
        console.log(response);
        return response.portfolio;
    }
});

一个看法：

SITE.ProjectsView = Backbone.View.extend({
    el: '#main',
    initialize: function() {
        _.bindAll(this, 'render');
        // create a collection
        this.collection = new SITE.Projects();
        // Fetch the collection and call render() method
        var that = this;
        this.collection.fetch({
            success: function () {
                that.render();
            }
        });
    },
    template: SITE.helpers.template('project-list'),
    render: function() {
        $(this.el).html(this.template({ projects: this.collection.toJSON() }));
    }
});

路由器：

SITE.Router = Backbone.Router.extend({
    initialize: function() {
        this.el = $('#main');
    },
    routes: {
        "": "index",
        "projects": "projects",
        "projects/:id": "project"
    },

    // Homepage / List of projects
    index: function() {
        var view = new SITE.ProjectsView();
    },

    // List of projects
    projects: function() {
        var view = new SITE.ProjectsView();
    },

    // Individual Project
    project: function(id) {
        var view = new SITE.ProjectView();
        console.log("You are trying to reach project " + id);
    }
});
4

1 回答 1

1

因此，您的数据并不是真正动态的，因此与项目集合不断变化的动态应用程序相比，您可以稍微作弊。我只会在应用程序启动时加载项目集合，然后从那里为您的其余页面使用加载的集合和模型。

SITE.Router = Backbone.Router.extend({
    initialize: function() {
        //Router's don't have a this.el
        //this.el = $('#main');
        this.projects = new SITE.Projects();
    },
    routes: {
        "": "index",
        "projects": "projects",
        "projects/:id": "project"
    },

    // Homepage / List of projects
    index: function() {
        var view = new SITE.ProjectsView({collection: this.projects});
        if (this.projects.isEmpty()) {
            this.projects.fetch({success: function () {
                view.render();
            }});
        } else {
            view.render();
        }
    },

    // List of projects
    projects: function() {
        var view = new SITE.ProjectsView({collection: this.projects}).render();
    },

    // Individual Project
    project: function(id) {
        var view = new SITE.ProjectView({model: this.projects.get(id)}).render();
    }
});

然后让你的观点更简单/愚蠢。视图应该在构造函数/初始化的选项参数中接受它们的模型/集合。试一试，看看你能不能让它发挥作用。否则，您的代码看起来应该能够自行更改相应的视图代码，所以我将把它作为练习留给读者。

于 2012-12-31T15:36:56.027 回答