BackboneJS 搜索过滤系统

Question

我正在使用控制器来获取 URL。我需要一种将参数放入此 POST 的方法。这些参数由用户在 View & Not Stored 上选择（我不知道如何存储）

目前我设法 1) 使用来自 API 的搜索结果显示和路由视图 2）当有人选择过滤选项时显示并刷新页面

问题 1）我不知道如何记录用户点击了什么 2）我如何“重新发布”以便我可以获得新的结果集 3) 我读到有人说 POST Fetch 应该在 Model 中完成，Conllection 用于存储多个模型，在这种情况下我不知道？

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

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

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

捕获用户所做的事情应该在视图中完成。例如：

filterView.js

var View = Backbone.View.extend({

  initialize: function() {
    _.extend(this, Backbone.Events);
  },

  render: function() {
    // Your normal render routine
    return this;
  },

  events: {
    "submit form": "submit"
  },

  submit: function() {
    var query = $("input[type=search]", this.el).val();
    this.trigger("submit", query);
  }

});

return View;

...无论实现 filterView 和 jobCollection...

// Implement our collections, views, etc
var jobCollection = new JobCollection();
var jobsView = new JobsView();
var filterView = new FilterView().render();

// Add listeners on our view
filterView.on("submit", updateJobs);

// Implement the functions for our view (this can be done in a number of ways)
function updateJobs(query) {
  jobCollection.fetch({
    data: {
      query: query
    }
  }).done(function(response) {
    // Technically you could just provide "jobsView.render" to the done() method, but I wanted to be a little more verbose here regarding parameters
    jobsView.render(response);
  });
}

您的视图只知道自己（输入结构等）。实现视图和集合的东西就是这两个模块之间的代理。

通过提供一个实现data 参数的对象，您可以在fetch 语句中指定参数。在这种情况下，我们将使用 query 键传递查询。 fetch 返回一个承诺，所以一旦完成，我们将该响应返回给 jobsView 并将其传递给渲染函数，该函数应设置为接受集合。

updateJobs 不知道视图实现，它只知道它希望包含一个查询。

此代码并非旨在直接实现或复制/粘贴，而是旨在为您提供如何完成您想要做的事情的大纲。