我想实现使用搜索页面Backbone.js
。 搜索参数是从一个简单的形式拍摄,并且服务器知道解析查询参数和返回结果的JSON数组。 我的模型看起来像这样,或多或少:
App.Models.SearchResult = Backbone.Model.extend({
urlRoot: '/search'
});
App.Collections.SearchResults = Backbone.Collection.extend({
model: App.Models.SearchResult
});
var results = new App.Collections.SearchResults();
我想我每次执行results.fetch()
搜索表单的内容也将与序列化GET
请求。 有一个简单的方法来添加这个,还是我做了错误的方式和可能应该handcoding请求,并创建从返回的结果集:
$.getJSON('/search', { /* search params */ }, function(resp){
// resp is a list of JSON data [ { id: .., name: .. }, { id: .., name: .. }, .... ]
var results = new App.Collections.SearchResults(resp);
// update views, etc.
});
思考?
Backbone.js的取得与参数回答您的大多数问题,但是我把一些在这里。
添加data
参数,以此来fetch
调用,例如:
var search_params = {
'key1': 'value1',
'key2': 'value2',
'key3': 'value3',
...
'keyN': 'valueN',
};
App.Collections.SearchResults.fetch({data: $.param(search_params)});
现在,您的通话网址增加了,你可以在服务器端解析参数。
注意:代码简化,并且未测试
我想你应该分裂的功能:
搜索模式
它是在你的服务器端适当的资源 。 唯一允许的动作是CREATE
。
var Search = Backbone.Model.extend({
url: "/search",
initialize: function(){
this.results = new Results( this.get( "results" ) );
this.trigger( "search:ready", this );
}
});
结果集
它只是负责收集结果型号列表中
var Results = Backbone.Collection.extend({
model: Result
});
搜索表单
你看,这个观点是使智能工作,听form.submit
,创建一个新的Search
对象,并将其发送到服务器中created
。 这个created
任务并不意味着搜索必须存储在数据库中,这是正常的creation
行为,但它并不总是需要这样。 在我们的例子create
一个搜索是指搜索数据库寻找具体的寄存器。
var SearchView = Backbone.View.extend({
events: {
"submit form" : "createSearch"
},
createSearch: function(){
// You can use things like this
// http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery
// to authomat this process
var search = new Search({
field_1: this.$el.find( "input.field_1" ).val(),
field_2: this.$el.find( "input.field_2" ).val(),
});
// You can listen to the "search:ready" event
search.on( "search:ready", this.renderResults, this )
// this is when a POST request is sent to the server
// to the URL `/search` with all the search information packaged
search.save();
},
renderResults: function( search ){
// use search.results to render the results on your own way
}
});
我认为,这种解决方案是非常简洁,优雅,直观,非常扩展。
发现了一个很简单的解决方案-重写url()
集合中的功能:
App.Collections.SearchResults = Backbone.Collection.extend({
urlRoot: '/search',
url: function() {
// send the url along with the serialized query params
return this.urlRoot + "?" + $("#search-form").formSerialize();
}
});
但愿这不会吓坏人谁拥有更多的骨干/ JavaScript的能力比我自己。
这似乎骨干网(也许jQuery的)的当前版本自动stringifies的data
值,所以没有必要调用$.param
了。
以下行产生相同的结果:
collection.fetch({data: {filter:'abc', page:1}});
collection.fetch({data: $.param({filter:'abc', page:1})});
查询字符串将是filter=abc&page=1
。
编辑:这应该是一个评论,而不是答案。