Question

我正在使用Controller来获取URL。我需要一种方法将Parameter放入此POST中。用户在View＆amp ;;上选择这些参数。尚未存储（我不知道如何存储）

目前我成功了 1）显示＆amp;使用来自API的搜索结果路由视图 2）当有人选择过滤选项

时显示并刷新页面

问题 1）我不知道如何记录用户点击的内容 2）我如何“重新发布”所以我可以获得新的结果集 3）我读到并说有人说POST Fetch应该在Model中完成，Conllection是针对Store Multiple Models我不知道在这个场景中？

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

模型 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

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

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

您的视图仅了解自身（输入结构等）。实现视图和集合的是这两个模块之间的代理。

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

updateJobs不知道视图实现，它只知道是否需要包含查询。

此代码不是直接实现或复制/粘贴的，但它旨在提供一个大纲，说明如何完成您的目标。

BackboneJS搜索过滤系统

1 个答案: