Javascript 主干网中动态变化的url

我试图在路由器内动态更改url，但无法做到，它一直返回到基本集合url。在这里，我发布了3个不同集合的代码，除了指向三个不同的URL之外，它们的功能完全相同。 我只有一个

模型

和三个

集合

依赖于该模型，它们甚至呈现相同的视图。如何动态更改

url

，以便只能创建一个

集合

和一个

模型

？对于这样的案件，这是最好的做法吗

    // MODELS & COLLECTIONS 
    window.Post = Backbone.Model.extend({
            urlRoot:  function() {
                    return 'http://localhost:5000/json/guides/:id'
            }
    })

    App.Collections.RecentPosts = Backbone.Collection.extend({
            model: Post,
            url:'http://localhost:5000/json/posts/recent',
    })
    App.Collections.PopularPosts = Backbone.Collection.extend({
            model: Post,
            url:'http://localhost:5000/json/posts/popular',
    })
    App.Collections.FeaturedPosts = Backbone.Collection.extend({
            model: Post,
            url:'http://localhost:5000/json/posts/featured',
    })

    // CONTROLLER
    App.Controllers.Documents = Backbone.Router.extend({
            routes:{
            "recent"                : "recent",
            "popular"         : "popular",
            "featured"          : "featured",
            },

            recent: function(){
                //.... same as featured ?
            },
            popular: function(){
                //.... same as featured ?
            },
            featured: function(){
                    $("#browser").empty();
                    var collection = new App.Collections.Posts();
                    collection.fetch({
                                success: function(col,posts){
                                    new App.Views.GuideView({collection: posts});
                                },
                                error: function(error){
                                    console.log(error)
                                }
                        })
            }
    });

---

我认为最好的做法是有3个集合，每个集合都有URL和属性

这使得代码更易于维护，因为您可以在一个单独的文件中为它们分配不同的事件和侦听器，而不是拥有一个包含所有逻辑的“上帝集合”

---

当然，您仍然可以保留一个helper对象或父集合，其中的代码是所有这些集合的通用代码。

有许多不同的方法可以做到这一点。以下可能是“最佳实践”

App.Controllers.Documents = Backbone.Router.extend({
        routes:{
        "recent"                : "recent",
        "popular"         : "popular",
        "featured"          : "featured",
        },

        initialize: function () {
            this.collection = new App.Collections.Posts();
        },

        _showPage: function (config) {
            $("#browser").empty();

            this.collection.fetch({
                url: config.url,
                success: function(col,posts){
                    new App.Views.GuideView({collection: posts});
                },
                error: function(error){
                    console.log(error)
                }
            });
        },

        recent: function(){
            this._showPage({url:'http://localhost:5000/json/posts/recent'});
        },
        popular: function(){
            this._showPage({url:'http://localhost:5000/json/posts/popular'});
        },
        featured: function(){
           this._showPage({url:'http://localhost:5000/json/posts/featured'});
        }
});

因为我真的不知道你的页面会变得多么复杂，这可能是我在没有更多信息的情况下能做的最好的了。但是，这个想法是“this.collection”设置在路由器初始化上。。所以你可以继续重复使用它。_showPage方法执行显示页面所需的任何基本任务，routes调用的方法使用它执行详细说明之前所需的任何基本任务。传递到配置中的url将简单地告诉集合从何处获取其信息-我假设所有数据都具有相同的格式并且“是相同的东西”。。只是不同的过滤器

您可能可以使用

App.Views.GuideView执行类似操作：

App.Controllers.Documents = Backbone.Router.extend({
        routes:{
        "recent"                : "recent",
        "popular"         : "popular",
        "featured"          : "featured",
        },

        initialize: function () {
            this.collection = new App.Collections.Posts();
            this.view = new App.Views.GuideView({collection: this.collection});
        },

        _showPage: function (config) {
            $("#browser").empty();

            this.collection.fetch({
                url: config.url,
                success: _.bind(function(col,posts){
                    this.view.render();
                }, this),
                error: function(error){
                    console.log(error)
                }
            });
        },

        recent: function(){
            this._showPage({url:'http://localhost:5000/json/posts/recent'});
        },
        popular: function(){
            this._showPage({url:'http://localhost:5000/json/posts/popular'});
        },
        featured: function(){
           this._showPage({url:'http://localhost:5000/json/posts/featured'});
        }
});

“render”只会重建视图，因为您已经在视图中将集合引用为“this.options.collection”（或者您可以向视图添加“initialize”，并将this.collection设置为this.options.collection）。当集合得到更新时，所有这些信息都将在视图中引用。。因此无需重置它。
谢谢！它工作得很好。这是我最初的方法，但我没有初始化
路由器
，而且也做得不对：
获取（{url:config.url}，成功：…
。我在
路由器
中还有一个
主页
函数，它
这个导航（“流行”）
s。这不起作用……为什么会这样？我想是因为默认情况下会无声地调用“导航”。请尝试执行
this.navigate（“popular”，{trigger:true}）；