Javascript ng重复+;流星火焰/太空棒中的过滤器状特征
我来自AngularJS背景,最近开始学习流星 在AngularJS中,我可能会有如下内容:Javascript ng重复+;流星火焰/太空棒中的过滤器状特征,javascript,meteor,meteor-blaze,spacebars,Javascript,Meteor,Meteor Blaze,Spacebars,我来自AngularJS背景,最近开始学习流星 在AngularJS中,我可能会有如下内容: <div ng-repeat="person in persons | filter:search"> <h4>{{person.name}}</h4> <b>{{person.age}}</b> </div> {{person.name} {{person.age} search对象可以绑定(双向绑定)到HTML
<div ng-repeat="person in persons | filter:search">
<h4>{{person.name}}</h4>
<b>{{person.age}}</b>
</div>
{{person.name}
{{person.age}
search
对象可以绑定(双向绑定)到HTML文本框。每当文本框更改时,过滤器将自动更新
如何在Meteor中做到这一点?我不熟悉AngularJS,但这里有一个示例,说明如何使用Meteor实现这一点 此示例显示了一个人员列表,以及一个HTML编号输入,您可以使用它按显示列表的年龄进行筛选
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>
为什么不直接听
.age
的change
事件呢?我听的是“input”事件,这在HTML5中是正确的方式。如果我想按文本过滤呢?
// 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);
}
});