backbone.js Search Filtering System [Structure]

Question

I'm using Controller to Fetch URL. I need a way to put Parameter in this POST. These Parameters are selected by users on View & Not Stored yet(I do not know how to store)

Currently I managed to

1. Display & Route The View with search result coming from API
2. Display and refresh the page when someone selects a Filter Option

Problem

1. I got no idea how to record what the users clicked
2. How do i "re-post" so i can get the new set of results
3. I read and say people saying POST Fetch should be done in Model , Collection is for Store Multiple Models which i don't know in this scenario?

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

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

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

Some Examples would be awesome. Thank you

Answer 1

Fetching means to retrieve (as you probably know), to GET from the server some information.

POST is usually for creating new resources. For instance, saving a new Job would be a POST on the /jobs URL in a REST like API.

In your case, what you probably want is a:

• JobCollection which would extend from Backbone Collection and use a JobModel as the model
• JobModel which would represents a Job.

You currently already have the JobModel but it has no Collection... And instead you have a Collection of JobFilters, which means that you are handling multiple set of filters. That's probably not what you had in mind?

Assuming you now have a JobCollection that represents the list of all the jobs your views will display, when you do a collection.fetch() on it, it'll GET all the jobs, without any filters.

The question now becomes: how do I pass extra parameters to fetch() in a collection?

There are many ways to do that. As you already have a JobFilterModel, what you can do in your JobFilterModel is implement a method such as:

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

A model's toJSON will transform the Model into a nice Javascript object. So for your JobFilterModel, toJSON() will give back something like:

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

Putting it in the data property of the Collection's fetch() option hash will add those to the query to the server. Then, whatever jobs your server answer with, they will be used to reset (that's why reset: true in the options, otherwise it just updates) the collection of jobs. You can then bind in your views on jobCollection "reset" event to know when to re-render.

So, now, your JobFilterModel only 'job' is to store (in memory) the filters the user has chosen, and the JobCollection and JobModel don't know anything about the filters (and they shouldn't). As for storing the JobFilterModel's current status, you can look at Backbone localstorage plugin or save it on your server / get it from your server (using the model's fetch() and save() method).

I hope this helps!