Meteor Blaze / Spacebars中的ng-repeat + filter like功能 [英] ng-repeat + filter like feature in Meteor Blaze/Spacebars

问题描述

我来自AngularJS背景，最近开始学习Meteor。

I am from AngularJS background, recently start learning Meteor.

在AngularJS中，我可能有类似的东西：

In AngularJS, I may have something like:

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

搜索对象可以绑定（2-方式绑定）到HTML文本框。每当文本框发生变化时，过滤器都会自动更新。

search object can be bound (2-way bound) to HTML textbox. Whenever the textbox changed, the filter will be automatically updated.

如何在Meteor中这样做？

How to do so in Meteor?

推荐答案

我不熟悉AngularJS，但这里有一个如何用Meteor实现这个目的的例子。

I am not familiar with AngularJS, but here is an example of how you would accomplish this with Meteor.

这个例子显示了一个列表人员，以及HTML编号输入，您可以使用它来按年龄过滤显示的列表。

This example shows a list of persons, along with an HTML number input that you can use to filter by age the displayed list.

客户/观点/人/人。 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);
  }
});

这篇关于Meteor Blaze / Spacebars中的ng-repeat + filter like功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！