Meteor Blaze/空格键中的 ng-repeat + 类似过滤器的功能

Posted 2023-03-08

【中文标题】Meteor Blaze/空格键中的 ng-repeat + 类似过滤器的功能

【英文标题】：ng-repeat + filter like feature in Meteor Blaze/Spacebars

【发布时间】：2014-11-06 10:21:31

【问题描述】：

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

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

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

search 对象可以绑定（2 向绑定）到 html 文本框。每当文本框发生变化时，过滤器都会自动更新。

如何在 Meteor 中这样做？

【参考方案1】：

我不熟悉 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);
  
);

【讨论】：

为什么不只听change 的.age 事件？

我听“输入”事件，这是 HTML5 中的正确方式。

如果要按文本过滤呢？