Javascript backbone.js搜索过滤系统[结构]

我正在使用控制器获取URL。我需要一种在这篇文章中输入参数的方法。这些参数是用户在视图中选择的&尚未存储（我不知道如何存储）

目前我设法做到了

显示并路由带有来自API的搜索结果的视图

当有人选择过滤器选项时，显示并刷新页面

问题

我不知道如何记录用户点击的内容

如何“重新发布”以便获得新的结果集

我读到有人说应该在模型中进行后期提取， 集合是为存储多个模型，我不知道在这方面 情景

收藏 Jobs.js

集合过滤器.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

路由器.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
    };
});

定义([
“jquery”，
“下划线”，
"骨干",，
“视图/作业/列表”，
“视图/作业/过滤器”
]，函数（$，\，主干，JobListView，JobListFilterView）{
var AppRouter=Backbone.Router.extend({
路线：{
//定义一些URL路由
“求职者/工作”：“表演工作”，
“*操作”：“defaultAction”
},
初始化：函数（attr）
{
Backbone.history.start（{pushState:true，根：“/”}）
},
showJobs:function（）
{
var view=新作业列表视图（）；
视图。$el.appendTo（“#bbJobList”）；
view.render（）；
console.log（视图）；
var jobListFilterView=新的jobListFilterView（）；
jobListFilterView.render（）
},
defaultAction:函数（操作）
{
console.info（'defaultAction Route'）；
log（'无路由：'，操作）；
}
});
var initialize=函数（）{
log（'Router Initialized'）；//获取意味着检索（您可能知道），从服务器获取一些信息

POST通常用于创建新资源。例如，保存新作业将是REST-like API中/jobs URL上的POST

在您的情况下，您可能需要的是：


JobCollection，它将从主干集合扩展并使用JobModel作为模型
表示作业的作业模型

您当前已经有了JobModel，但它没有集合…取而代之的是JobFilters集合，这意味着您正在处理多组筛选器。这可能不是您所想的

假设您现在有一个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
}

将其放入集合的fetch（）选项散列的数据属性中，会将这些内容添加到服务器的查询中。然后，无论服务器回答的作业是什么，它们都将用于重置作业集合（这就是为什么在选项中重置：true，否则只会更新）。然后可以在jobCollection“重置”上绑定视图事件以了解何时重新渲染

因此，现在，您的JobFilterModel唯一的“作业”是存储（在内存中）用户选择的过滤器，而JobCollection和JobModel对过滤器一无所知（他们也不应该知道）。至于存储JobFilterModel的当前状态，您可以查看主干本地存储插件或将其保存在服务器上/从服务器获取它（使用模型的fetch（）和save（）方法）

我希望这会有所帮助！
那么，如果单击“筛选”按钮，我会调用refreshJobs。但在此之前，我需要更新模型中的参数吗？正确，您需要首先更新JobFilterModel的实例属性。例如：JobFilterModel=new JobFilterModel（{}）；JobFilterModel.set（“T”，2）；//只是一个示例jobFilterModel.refreshCollection（jobCollection）；您可以通过绑定模型更改以自动调用refreshCollection使其更“无缝”，但这样就很难控制何时实际从服务器中提取（即，当您修改多个筛选器值时，您只想提取一次…）。
//jobCollection being the instance of Job collection you want to refresh
refreshJobs: function(jobCollection) {
  jobCollection.fetch({reset: true, data: this.toJSON()});
}

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