骨幹路由器不能通信和發送url參數來查看

Question

我知道如何使用偵聽器從我的視圖中過濾集合，但我無法弄清楚如何使用骨幹路由器和url來做到這一點。

我無法從路由器訪問我的視圖或集合，因爲它們尚未實例化。我的意思是我不能只是添加一個過濾器方法到我的集合，然後調用app.PurchaseList.filter。我可以創建一個包含已過濾項目的新集合，但是如何將此集合傳遞給我的視圖？

一些問題使用PubSub解答，但​​我認爲會有更直接的方法。或者，最好不要將url路由用於這樣的任務，並直接從我的視圖中觸發事件（在這種情況下，整個過濾器代碼可以保留在我的AppView視圖中，使事情變得更容易）。

是的，我是初學者，這麼多應該是顯而易見的;）

JS /路由/ backboneRouter.js

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

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

的js/app.js

var app = app || {}; 

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

js/views/appView.js

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

JS /收藏/ purchases.js

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

Answer 1

一般你讓集合做過濾：

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

未測試！

Answer 2

我現在意識到，我不應該在凌晨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 /＃/過濾/：現在測試輸出

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

這就是我想實現。 PS：我對這個模糊的問題表示歉意，沒有做足夠的研究（因爲我能解決我自己的問題）。我一定不會再犯這個錯誤。