backbone.js搜索过滤系统[Structure]


backbone.js Search Filtering System [Structure]

我正在使用控制器获取URL。我需要一种在POST中放入Parameter的方法。这些参数由用户在View&尚未存储(我不知道如何存储)

目前我设法做到

  1. 显示&使用来自API的搜索结果路由视图
  2. 当有人选择筛选选项时显示并刷新页面

问题

  1. 我不知道如何记录用户点击的内容
  2. 如何"重新发布"以便获得新的结果
  3. 我读到有人说POST Fetch应该在Model中完成,收藏是为商店多个模型,我在这里不知道场景

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

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

型号过滤器.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
    };
});

一些例子会很棒。感谢

Fetching意味着检索(正如您可能知道的),从服务器获取一些信息。

POST通常用于创建新资源。例如,保存一个新作业将是在类似REST的API中的/jobs URL上进行POST。

在你的情况下,你可能想要的是:

  • JobCollection,它将从Backbone Collection扩展并使用JobModel作为模型
  • 表示作业的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
}

将它放在Collection的fetch()选项散列的数据属性中,会将这些数据添加到服务器的查询中。然后,无论服务器回答的作业是什么,它们都将用于重置作业集合(这就是重置的原因:在选项中为true,否则它只会更新)。然后,您可以在视图中绑定jobCollection"重置"事件,以了解何时重新渲染。

所以,现在,你的JobFilterModel唯一的"作业"是将用户选择的过滤器存储(在内存中),而JobCollection和JobModel对过滤器一无所知(他们不应该知道)。至于存储JobFilterModel的当前状态,您可以查看Backbone本地存储插件,或者将其保存在服务器上/从服务器获取(使用模型的fetch()和save()方法)。

我希望这能有所帮助!