Skip to content

Commit ba757fb

Browse files
jirenjiren
committed
Added append to element to specific container
- Updated docs
1 parent 73b7a39 commit ba757fb

5 files changed

Lines changed: 80 additions & 38 deletions

File tree

‎README.md‎

Lines changed: 50 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,39 @@ Basic requirement to implement filtering using filter.js are JSON data, View tem
1717
It takes three arguments one is movies, second is container in which html element going to append, third one is options. Options must have template element selector.
1818
Others are in options like criteria, callbacks, search.
1919

20-
```
20+
```javascript
2121
var FJS = FilterJS(movies, '#movies', {
2222
template: '#movie-template',
23-
callbacks: {
23+
callbacks: {
2424
afterFilter: function(result){
2525
$('#total_movies').text(result.length);
2626
}
2727
}
2828
});
2929
```
3030

31+
To append in each item in different container use option `appendToContainer`. This option is a function with two arguments
32+
one is html element content and second is record object.
33+
34+
```javascript
35+
36+
//This will append elements to specific year.
37+
var appendFn = function(html_ele, record){
38+
$("#" + record.year).append(html_ele);
39+
}
40+
41+
var FJS = FilterJS(movies, '#movies', {
42+
template: '#movie-template',
43+
appendToContainer: appendFn
44+
});
45+
```
46+
3147
### JSON data
3248
-------------
3349

3450
Capture the JSON data (maybe using @movies.to_json). i.e
3551

36-
```
52+
```javascript
3753
var movies = [
3854
{
3955
"name": "The Shawshank Redemption",
@@ -63,7 +79,7 @@ Capture the JSON data (maybe using @movies.to_json). i.e
6379
To render each json object require view template. In filter.js micro-templating module inspired by Underscopre.js.
6480

6581

66-
```
82+
```javascript
6783
<script id="movie-template" type="text/html">
6884
<div class="movie">
6985
<div class="thumbnail">
@@ -104,21 +120,21 @@ Other options are filter `type`, `event` and `selector`.
104120

105121
There are two way to add criteria one is add at time of filter object initialisation and other one is add when required
106122

107-
```
108-
# On create
123+
```javascript
124+
//On create
109125
var fjs = FilterJS(movies, '#movies', {
110126
template: '#movie-template',
111127
criterias: [ {field: 'year', ele: '#year_filter', type: 'range'} ]
112128
}
113129

114-
# Add one at a time.
130+
// Add one at a time.
115131
FJS.addCriteria({field: 'year', ele: '#year_filter', type: 'range'})
116132
FJS.addCriteria({field: 'genre', ele: '#genre_criteria input:checkbox'})
117133

118-
# with all option
134+
// with all option
119135
FJS.addCriteria({field: 'year', ele: '#year_filter', type: 'range', all: 'all_years'})
120136

121-
# Full options list.
137+
// Full options list.
122138
FJS.addCriteria({field: 'genre', ele: '.genres', event: 'change', selector: ':checked' })
123139
```
124140
@@ -129,23 +145,26 @@ More detail for `range` filter. It is expected to set ranges as values like '20-
129145
130146
Example:
131147
132-
```
148+
```html
133149
<input checked="checked" value="20-30" type="checkbox">
134150
```
135151
136152
For nested field selection. In below object to select filter on name `field` option value would be `detail.name`, for city `detail.address.city`.
137153
138154
Json object:
139155
156+
```json
157+
140158
{
141159
detail: { name: 'Jiren', address: {city: 'Pune'} }
142160
}
161+
```
143162
144163
#### Remove criteria.
145164
146165
Using `removeCriteria`, remove criteria dynamically. It take one argument `filed` name. i.e removing year criteria.
147166
148-
```
167+
```javascript
149168
fjs.removeCriteria('year')
150169
```
151170
@@ -162,7 +181,8 @@ Define callback in settings. Callbacks execute on different events.
162181
163182
i.e
164183
165-
```
184+
```javascript
185+
166186
var filter_callbacks = {
167187
beforeAddRecords: function(records){
168188
// Process new json data records.
@@ -185,7 +205,8 @@ i.e
185205
186206
Init Filter object with above callbacks
187207
188-
```
208+
```javascript
209+
189210
var fjs = FilterJS(movies, '#movies', {
190211
template: '#movie-template',
191212
callbacks: filter_callbacks
@@ -203,28 +224,30 @@ var fjs = FilterJS(movies, '#movies', {
203224
204225
For search needed textbox element selector. By default search will work on all json object fields. If needed search in particular fields then set `fields` option.
205226
206-
```
207-
# Init with search
227+
```javascript
228+
229+
// Init with search
208230
FilterJS(movies, '#movies', {
209231
template: '#movie-template',
210232
search: {ele: '#searchbox'} // Search in all fields of json object.
211233
}
212234

213-
#Search in given fields
235+
// Search in given fields
214236

215237
search: {ele: '#searchbox', fields: ['name', 'runtime']}
216238

217239
```
218240
219241
Default search will trigger after 2 char. This can be configured using `start_length` option.
220242
221-
```
243+
```javascript
244+
222245
search: {ele: '#searchbox', fields: ['name', 'runtime'], start_length: 4 }
223246
```
224247
225248
Default search will start searching immediately after user types. A timeout can be configured using `timeout` option (in milliseconds).
226249
227-
```
250+
```javascript
228251
search: {ele: '#searchbox', fields: ['name', 'runtime'], timeout: 100 }
229252
```
230253
@@ -234,18 +257,20 @@ Add more data to existing filter
234257
235258
If you are streaming json data using ajax then you can add data like this
236259
260+
```javascript
237261

238-
var fjs = FilterJS(movies, '#movies', { template: '#movie-template'})
262+
var fjs = FilterJS(movies, '#movies', { template: '#movie-template'})
239263

240-
fJS.addData(data)
264+
fJS.addData(data)
265+
```
241266
242267
243268
Add data using ajax streaming
244269
-----------------------------
245270
246271
Add streaming option to above define 'settings'.
247272
248-
```
273+
```javascript
249274
var fjs = FilterJS(movies, '#movies', {
250275
template: '#movie-template',
251276
streaming: {
@@ -266,7 +291,7 @@ movies/index.json.json?offset=0&limit=50&q='search text'
266291
267292
Add streaming after initialisation.
268293
269-
```
294+
```javascript
270295
fjs.setStreaming({
271296
data_url: 'data/stream_movies.json',
272297
stream_after: 1,
@@ -279,14 +304,13 @@ Remove records from filtering
279304
280305
- Remove using ids. ids are records `id` field.
281306
282-
```
283-
fjs.removeRecords([1,2,3]);
284-
307+
```javascript
308+
fjs.removeRecords([1,2,3]);
285309
```
286310
287311
- Remove using [JsonQuery](https://github.com/jiren/JsonQuery) criteria
288312
289-
```
313+
```javascript
290314
fjs.removeRecords({year: 1980});
291315

292316
fjs.removeRecords({'year.$gt': 1980, 'rating': 8.5});

‎dist/filter.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
* filter.js
3-
* 2.0.0 (2015-02-21)
3+
* 2.0.0 (2015-02-26)
44
*
55
* Released under the MIT license
66
* http://opensource.org/licenses/MIT
@@ -781,6 +781,7 @@ var FJS = function(records, container, options) {
781781
this.templateFn = this.template($(this.opts.template).html());
782782
this.criterias = [];
783783
this._index = 1;
784+
this.appendToContainer = this.opts.appendToContainer || appendToContainer;
784785

785786
$.each(this.opts.criterias || [], function(){
786787
self.addCriteria(this);
@@ -924,20 +925,25 @@ F.render = function(records){
924925

925926
this.execCallback('beforeRender', records);
926927

927-
var cName = 'beforeRecordRender';
928+
var cbName = 'beforeRecordRender';
928929

929930
$.each(records, function(i){
930-
self.execCallback(cName, this);
931+
self.execCallback(cbName, this);
931932
this._fid = (self._index++);
932933

933934
ele = self.view.call(self, this, i);
934935
if (typeof ele === 'string') ele = $($.trim(ele));
935936
ele.attr('id', 'fjs_' + this._fid);
936937
ele.addClass('fjs_item');
937-
self.$container.append(ele);
938+
939+
self.appendToContainer(ele, this);
938940
});
939941
};
940942

943+
var appendToContainer = function(htmlele, record){
944+
this.$container.append(htmlele);
945+
};
946+
941947
var setDefaultCriteriaOpts = function(criteria){
942948
var ele = criteria.$ele,
943949
eleType = criteria.$ele.attr('type');

0 commit comments

Comments
 (0)