bone.js搜索過濾系統[結構]

Question

我正在使用Controller來獲取URL。 我需要一種將參數放入此POST的方法。 這些參數是由用戶在“查看且尚未存儲”上選擇的（我不知道如何存儲）

目前，我設法

1. 顯示和路由具有來自API的搜索結果的視圖
2. 當有人選擇過濾器選項時顯示並刷新頁面

問題

1. 我不知道如何記錄用戶點擊的內容
2. 我如何“重新發布”，以便獲得新的結果
3. 我讀過並說人們說POST Fetch應該在Model中完成，Collection是用於存儲多個模型的，在這種情況下我不知道？

集合Jobs.js

    define([
        'jquery',
        'underscore',
        'backbone',
        'models/filter'
    ], function($, _, Backbone,JobListFilterModel){
        var Jobs = Backbone.Collection.extend({
            url: function () {
                return 'http://punchgag.com/api/jobs?page='+this.page+''
            },
            page: 1,
            model: JobListFilterModel
        });
        return Jobs;
});

集合Filter.JS

define([
    'jquery',
    'underscore',
    'backbone',
    'models/filter'
], function($, _, Backbone,JobListFilterModel){
    console.log("Loaded");

    var Jobs = Backbone.Collection.extend({
        url: function () {
            return 'http://punchgag.com/api/jobs?page='+this.page+''
        },
        page: 1,
        model: JobListFilterModel
    });

//    var donuts = new JobListFilterModel;
//    console.log(donuts.get("E"));

    return Jobs;
});

模型Filter.js

define([
    'underscore',
    'backbone'
], function(_, Backbone){
    var JobFilterModel = Backbone.Model.extend({
        defaults: {
            T: '1',   //Task / Event-based
            PT: '1',  //Part-time
            C: '1',   //Contract
            I: '1'    //Internship
        }
    });
    // Return the model for the module
    return JobFilterModel;
});

建模Job.js

define([
    'underscore',
    'backbone'
], function(_, Backbone){
    var JobModel = Backbone.Model.extend({
        defaults: {
            name: "Harry Potter"
        }
    });
    // Return the model for the module
    return JobModel;
});

Router.js

define([
    'jquery',
    'underscore',
    'backbone',
    'views/jobs/list',
    'views/jobs/filter'



], function($, _, Backbone, JobListView, JobListFilterView){
    var AppRouter = Backbone.Router.extend({
        routes: {
// Define some URL routes
            'seeker/jobs': 'showJobs',
            '*actions': 'defaultAction'
        },
        initialize: function(attr)
        {
            Backbone.history.start({pushState: true, root: "/"})
        },
        showJobs: function()
        {
            var view = new JobListView();
            view.$el.appendTo('#bbJobList');
            view.render();
            console.log(view);


            var jobListFilterView = new JobListFilterView();
            jobListFilterView.render()
        },
        defaultAction: function(actions)
        {
            console.info('defaultAction Route');
            console.log('No route:', actions);
        }
    });

    var initialize = function(){

        console.log('Router Initialized');// <- To e sure yout initialize method is called

        var app_router = new AppRouter();
    };
    return {
        initialize: initialize
    };
});

一些例子會很棒。 謝謝

Answer 1

抓取意味着從服務器中檢索（如您可能知道的）GET信息。

POST通常用於創建新資源。 例如，保存新作業將是在REST之類的API中/ jobs URL上的POST。

在您的情況下，您可能想要的是：

• JobCollection將從Backbone Collection擴展而來，並使用JobModel作為模型
• JobModel代表一個Job。

當前您已經具有JobModel，但是它沒有Collection ...而是具有JobFilters的Collection，這意味着您正在處理多組過濾器。 那可能不是您所想的嗎？

假設您現在有一個JobCollection，它代表視圖將顯示的所有作業的列表，當您對它執行collection.fetch（）時，它將獲取所有作業，而沒有任何過濾器。

現在的問題變成了：如何將額外的參數傳遞給集合中的fetch（）？

有很多方法可以做到這一點。 由於已經有了JobFilterModel，因此在JobFilterModel中可以執行的方法如下：

//jobCollection being the instance of Job collection you want to refresh
refreshJobs: function(jobCollection) {
  jobCollection.fetch({reset: true, data: this.toJSON()});
}

模型的toJSON將把模型轉換成漂亮的Javascript對象。 因此，對於您的JobFilterModel，toJSON（）將返回類似以下內容的內容：

{
  T: '1',   //Task / Event-based
  PT: '1',  //Part-time
  C: '1',   //Contract
  I: '1'    //Internship
}

將其放在Collection的fetch（）選項哈希的data屬性中，會將這些內容添加到服務器的查詢中。 然后，無論服務器響應什么作業，都將使用它們來重置（這就是為什么reset：在選項中為true，否則只會更新）作業的集合。 然后，您可以在jobCollection“ reset”事件上綁定視圖，以知道何時重新呈現。

因此，現在，您的JobFilterModel唯一的“工作”是將（用戶選擇的）過濾器存儲（在內存中），而JobCollection和JobModel對過濾器一無所知（也不應該知道）。 至於存儲JobFilterModel的當前狀態，您可以查看Backbone localstorage插件或將其保存在服務器上/從服務器獲取（使用模型的fetch（）和save（）方法）。

我希望這有幫助！