流星RangeError:超出最大调用堆栈大小.在按键事件上 [英] Meteor RangeError: Maximum call stack size exceeded. on keypress event

查看:102
本文介绍了流星RangeError:超出最大调用堆栈大小.在按键事件上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试创建一个搜索框,以过滤掉我在客户端中返回的收藏集的结果.

Im trying to make a search box to filter down results of my returned collection in the client.

但是,当我实际尝试搜索时,我在控制台中遇到了以上错误.

however when i actually try searching I'm getting the above error in the console.

RangeError: Maximum call stack size exceeded.

这是我的代码.

<body>
{{#isolate}}
 <header class="row-fluid">
  {{> modules}}
 </header>
{{/isolate}}

<div id="main" class="span11">
 {{#if currentUser}}

 {{#isolate}}
  {{> customers_list}}
 {{/isolate}}   

 {{#isolate}}
  {{> contacts_list}}
 {{/isolate}}

 {{/if}}
</div>
</body>

我在模块模板内的搜索表单

my search form in inside the modules template

<template name="modules">
 {{templateLogger "modules"}}
  <ul id="module_list" class="nav">
 {{#each list}}
  <li>
   <a href="#" id="module_{{_id}}" module_id="{{_id}}" class="module">{{name}}</a>
  </li>
 {{/each}}
  <form><input type="text" id="search"></form>
</ul>

和我要过滤结果的"customers_list"模板

and my customers_list template that I'm trying to filter the results

<template name="customers_list">
 <table class="table">
  <tr>
   <th>Name</th>
   <th>Address</th>
   <th>City</th>
   <th>State</th>
   <th>Zip</th>
   <th>Phone</th>
  </tr>

 {{#each record}}
  <tr>
   <td>{{name}}</td>
   <td>{{address}}</td>
   <td>{{city}}</td>
   <td>{{state}}</td>
   <td>{{zip}}</td>
   <td>{{phone}}</td>
  </tr>
 {{/each}}
 </table>
</template>

这是搜索表单的事件处理程序

and here is the event handler for the search form

Template.modules.events({
 'keypress input#search': function (event) {
  Session.set("currentFilter", $('input#search'));
 }
});

和表单助手会显示结果

Template.customers_list.record = function() {
 qry = Session.get("currentFilter") || "";
 if (qry != "") {
  return Customers.find({$or: [ {'name': qry}, {'address': qry}, {'city': qry}, {'state': qry} ] });
 } else {
  return Customers.find({competitor: null}, {sort: {name: 1}});
 };
}

我不知道是什么原因导致了我从其他SO帖子上读到的关于该错误的错误,这似乎是一个无限循环,但是这些不是流星特有的问题,我不知道那是否会做出改变?还有一个无限循环,我也找不到.

I have no clue what the is causing this error from what i was able to read on other SO posts about the error it seems like its a infinite loop however those were not meteor specific questions and i don't know if that would make a difference? also if there is an infinite loop i cant find it.

任何帮助将不胜感激.

推荐答案

更改此内容

Template.modules.events({
 'keypress input#search': function (event) {
  Session.set("currentFilter", $('input#search'));
 }
});

为此:

Template.modules.events({
 'keyup input#search': function (event) {
  Session.set("currentFilter", $('input#search').val());
 }
});

我相信您只需要在输入字段的jQuery dom引用上使用.val().另外,我建议对事件使用keyup进行类似的操作.

I believe you just need the .val() on the jquery dom reference of the input field. Additionally I would recommend using keyup for the event for something like this.

为了获得想要的结果,您可能需要使用正则表达式.这就是我在应用程序中使用的内容.

For getting the results out like you want you likely want to use a regular expression. Here's what I'm using in my app.

Template.hudlies.found = function() {
  var searchVal = Session.get("searchFilter");
    if (searchVal != "") {
      var searchResults = Hudlies.find({ name: { $regex: '^.*' + searchVal + '.*', $options: 'i' } });
    };

  return searchResults;
};

这篇关于流星RangeError:超出最大调用堆栈大小.在按键事件上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆