ng-repeat + filtračná funkcia v Meteor Blaze / Spacebars - javascript, meteor, meteor-blaze, spacebars

Som z prostredia AngularJS a nedávno som sa začal učiť Meteor.

V AngularJS môžem mať niečo ako:

<div ng-repeat="person in persons | filter:search">
<h4>{{person.name}}</h4>
<b>{{person.age}}</b>
</div>

search objekt je možné viazať (obojsmerne) na textové pole HTML. Pri každej zmene textového poľa sa filter automaticky aktualizuje.

Ako to urobiť v Meteore?

odpovede:

AngularJS nepoznám, ale tu je príklad toho, ako by ste to dosiahli s Meteorom.

Tento príklad ukazuje zoznam osôb spolu so vstupom čísla HTML, pomocou ktorého môžete filtrovať podľa veku zobrazeného zoznamu.

client/views/persons/persons.html

<template name="persons">
<input class="age" type="number" value="{{filter}}">
<ul>
{{#each personsFiltered}}
{{> person}}
{{/each}}
</ul>
</template>

<template name="person">
<li>{{name}} is {{age}}</li>
</template>

client/views/persons/persons.js

// dummy collection for testing purpose, living only in the client
// (not backed by a real server-side persistent collection)
Persons=new Mongo.Collection(null);

// dummy dataset
Persons.insert({
name:"Alice",
age:25
});
Persons.insert({
name:"Bob",
age:35
});
Persons.insert({
name:"Charlie",
age:18
});

// on create, initialize our filter as a ReactiveVar
// need to meteor add reactive-var to use this
Template.persons.created=function(){
this.filter=new ReactiveVar(20);
};

Template.persons.helpers({
// value of the filter to initialize the HTML input
filter:function(){
return Template.instance().filter.get();
},
// reactively return the persons who are older than the input value
personsFiltered:function(){
return Persons.find({
age:{
$gt:Template.instance().filter.get()
}
});
}
});

// bind the value of the input to the underlying filter
Template.persons.events({
"input .age":function(event,template){
var currentValue=template.find(".age").valueAsNumber;
template.filter.set(currentValue);
}
});