我来自AngularJS背景,最近开始学习Meteor。
在 AngularJS 中,我可能有类似的东西:
<div ng-repeat="person in persons | filter:search">
<h4>{{person.name}}</h4>
<b>{{person.age}}</b>
</div>
search
对象可以绑定(2 向绑定)到 HTML 文本框。每当文本框更改时,过滤器将自动更新。
如何在 Meteor 中做到这一点?
我来自AngularJS背景,最近开始学习Meteor。
在 AngularJS 中,我可能有类似的东西:
<div ng-repeat="person in persons | filter:search">
<h4>{{person.name}}</h4>
<b>{{person.age}}</b>
</div>
search
对象可以绑定(2 向绑定)到 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>
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);
}
});