Javascript 主干路由器可以'；t通信并发送url参数以查看

我知道如何使用侦听器从视图中过滤集合，但我不知道如何使用主干路由器和url进行过滤

我无法从路由器访问我的视图或集合，因为它们尚未实例化。我的意思是，我不能只在我的收藏中添加一个筛选方法，然后调用app.PurchaseList.filter。我可以创建一个包含筛选项的新集合，但如何将其传递到视图

有些问题是用PubSub回答的，但我认为会有一个更直接的方法。或者最好不要对这样的任务使用url路由，直接从我的视图触发事件（在这种情况下，整个筛选代码可以保留在我的AppView视图中，使事情变得更简单）

是的，我是一个初学者，有很多事情是显而易见的；）

js/routes/backboneRouter.js

var app = app || {};
app.Router = Backbone.Router.extend({
    routes: {
        'filter/:filter': 'filter'
    },

    filter: function(filter) {
        //...
    }
});

var app = app || {};

$(function() {
    app.router = new app.Router();
    Backbone.history.start();
    app.appView = new app.AppView();
});

var app = app || {};
app.AppView = Backbone.View.extend({
    el: '#app',

    initialize: function() {
        this.collection = new PurchaseList();
        this.collection.fetch({reset: true});
        this.render();
        this.listenTo(this.collection, 'add', this.renderPurchases);
        this.listenTo(this.collection, 'reset', this.render);
    },

    events: {
        'click #add-purchase': 'addPurchase',
    },

    filter: function(filter) {
        console.log(filter);
    },

    addPurchase: function(event) {
        //...
    },

    render: function() {
        this.collection.each(function(item) {
            this.renderPurchases(item);
        }, this);
    },

    renderPurchases: function(item) {
        var purchaseView = new PurchaseView({
            model: item
        });
        this.$('#list').append(purchaseView.render().el);
    }
});

var app = app || {};
app.PurchaseList = Backbone.Collection.extend({
    model: PurchaseItem,
    url: 'api/purchase',
});

js/app.js

var app = app || {};
app.Router = Backbone.Router.extend({
    routes: {
        'filter/:filter': 'filter'
    },

    filter: function(filter) {
        //...
    }
});

var app = app || {};

$(function() {
    app.router = new app.Router();
    Backbone.history.start();
    app.appView = new app.AppView();
});

var app = app || {};
app.AppView = Backbone.View.extend({
    el: '#app',

    initialize: function() {
        this.collection = new PurchaseList();
        this.collection.fetch({reset: true});
        this.render();
        this.listenTo(this.collection, 'add', this.renderPurchases);
        this.listenTo(this.collection, 'reset', this.render);
    },

    events: {
        'click #add-purchase': 'addPurchase',
    },

    filter: function(filter) {
        console.log(filter);
    },

    addPurchase: function(event) {
        //...
    },

    render: function() {
        this.collection.each(function(item) {
            this.renderPurchases(item);
        }, this);
    },

    renderPurchases: function(item) {
        var purchaseView = new PurchaseView({
            model: item
        });
        this.$('#list').append(purchaseView.render().el);
    }
});

var app = app || {};
app.PurchaseList = Backbone.Collection.extend({
    model: PurchaseItem,
    url: 'api/purchase',
});

js/views/appView.js

var app = app || {};
app.Router = Backbone.Router.extend({
    routes: {
        'filter/:filter': 'filter'
    },

    filter: function(filter) {
        //...
    }
});

var app = app || {};

$(function() {
    app.router = new app.Router();
    Backbone.history.start();
    app.appView = new app.AppView();
});

var app = app || {};
app.AppView = Backbone.View.extend({
    el: '#app',

    initialize: function() {
        this.collection = new PurchaseList();
        this.collection.fetch({reset: true});
        this.render();
        this.listenTo(this.collection, 'add', this.renderPurchases);
        this.listenTo(this.collection, 'reset', this.render);
    },

    events: {
        'click #add-purchase': 'addPurchase',
    },

    filter: function(filter) {
        console.log(filter);
    },

    addPurchase: function(event) {
        //...
    },

    render: function() {
        this.collection.each(function(item) {
            this.renderPurchases(item);
        }, this);
    },

    renderPurchases: function(item) {
        var purchaseView = new PurchaseView({
            model: item
        });
        this.$('#list').append(purchaseView.render().el);
    }
});

var app = app || {};
app.PurchaseList = Backbone.Collection.extend({
    model: PurchaseItem,
    url: 'api/purchase',
});

js/collections/purchases.js

var app = app || {};
app.Router = Backbone.Router.extend({
    routes: {
        'filter/:filter': 'filter'
    },

    filter: function(filter) {
        //...
    }
});

var app = app || {};

$(function() {
    app.router = new app.Router();
    Backbone.history.start();
    app.appView = new app.AppView();
});

var app = app || {};
app.AppView = Backbone.View.extend({
    el: '#app',

    initialize: function() {
        this.collection = new PurchaseList();
        this.collection.fetch({reset: true});
        this.render();
        this.listenTo(this.collection, 'add', this.renderPurchases);
        this.listenTo(this.collection, 'reset', this.render);
    },

    events: {
        'click #add-purchase': 'addPurchase',
    },

    filter: function(filter) {
        console.log(filter);
    },

    addPurchase: function(event) {
        //...
    },

    render: function() {
        this.collection.each(function(item) {
            this.renderPurchases(item);
        }, this);
    },

    renderPurchases: function(item) {
        var purchaseView = new PurchaseView({
            model: item
        });
        this.$('#list').append(purchaseView.render().el);
    }
});

var app = app || {};
app.PurchaseList = Backbone.Collection.extend({
    model: PurchaseItem,
    url: 'api/purchase',
});

---

通常，您会让集合进行过滤：

app.PurchaseList = Backbone.Collection.extend({
    model: PurchaseItem,
    url: 'api/purchase',
    by: (attribute, value) => {
        let filter = {}
        filter[attribute] = value
        return new app.PurchaseList(this.where(filter));
    }
});

---

未经测试

我现在意识到我不应该在凌晨1点发布这篇文章，因为事情现在清楚多了

我的第一个问题是集合仅从我的AppView中初始化。据我所知，没有其他函数可以访问该集合，因为它仅限于AppView的范围

通过将集合的初始化添加到我的应用程序的名称空间对象（var app=app | |{}），我将集合的初始化移动到全局范围，以便在整个应用程序中都可以作为app.purchaseList访问它

此外，直接调用视图或集合的函数（如果我错了，请纠正我）不是一种好的做法。因此，路由器现在在我的集合上触发一个“过滤器”事件，我的视图正在监听该事件。筛选器值（/filter/：filter）通过触发器的第二个参数发送到集合（或我需要它的任何地方）

路由器

app.Router = Backbone.Router.extend({
    routes: {
        'filter/:filter': 'filter'
    },

    filter: function(value) {
        console.log('router filter');
        app.purchaseList.trigger('filter', value);
    }
}); 

应用程序

var app = app || {};

$(function() {
    app.appView = new app.AppView();
    app.router = new app.Router();
    Backbone.history.start();
});

收藏

var app = app || {};
app.PurchaseList = Backbone.Collection.extend({
    model: PurchaseItem,
    url: 'api/purchase',
});
app.purchaseList = new app.PurchaseList();

查看

var app = app || {};
app.AppView = Backbone.View.extend({
    el: '#app',

    initialize: function() {
        //...
        this.listenTo(app.purchaseList, 'filter', this.filterList);
    },

    events: {
        'click #add-purchase': 'addPurchase',
    },

    filterList: function(value) {
        console.log('appView filter');
        console.log(value);
    },

    addPurchase: function(event) {
        //...
    },

    render: function() {
        this.collection.each(function(item) {
            this.renderPurchases(item);
        }, this);
    },

    renderPurchases: function(item) {
        var purchaseView = new PurchaseView({
            model: item
        });
        this.$('#list').append(purchaseView.render().el);
    }
});

转到localhost:8080/#/filter/：立即测试输出

Navigated to http://localhost:8080/
backboneRouter.js:8 router filter
list.js:19 appView filter
list.js:20 test

这就是我想要实现的

---

附言：我为这个模糊的问题道歉，因为我没有做足够的研究（因为我能够解决我自己的问题）。我一定不会再犯这个错误。

“我无法从路由器访问我的视图或集合，因为它们还没有实例化”，然后您正在执行

app.appView.filter（'reset'）。。那不是一种景色吗。。？通常，我们根据路由器的路由初始化这些东西，并传入url参数。。。如果你不能访问任何东西，也许你应该考虑重新设计……对不起，这是一个剩余的函数调用，它不起作用（过滤器未定义），从我实验的时候。谢谢，但这实际上不是给我带来麻烦的部分（编写一个工作过滤器）。我就是不能工作，就是如何从我的路由器调用这个函数。我的收藏在我的视图中被实例化，这就是（我猜）为什么我不能直接从路由器调用你的过滤器。我猜这方面有一些最佳实践。