我不明白为什么我得到这个内部服务器错误500.也因为项目没有被隐藏,因为我想要他们。控制台输出说的是' $'没有定义哪个不对,我不相信,因为我是链接jquery。
HTML:
<template name="room">
<div class="container-fluid">
<h1> Sprint Retrospective</h1>
<form id="tagSearchForm" class="navbar-form navbar-right" role="search">
<div class="form-group">
<span><i class="fa fa-filter"></i></span>
<input id="filters" type="text" class="form-control" placeholder="Filter tags...">
</div>
<button id="filterTagsButton" type="button" class="btn btn-default">Filter</button>
</form>
{{> card}}
<hr>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6">
<h2> Good category </h2>
<ul class="fa-ul">
{{#each goodCards}}
<div class="row">
<div id="card" class="card-panel green">
<span class="white-text">
{{text}}
</span>
<div class="card-action">
<div class="chip">
<i id="deleteCardButton" class="material-icons fa fa-trash-o"></i>
Remove Card
</div>
{{#each tags}}
<div class="chip">
<tag class="tag" id="{{this}}">{{this}}</tag>
<i id="removeTag" class="material-icons fa fa-ban"></i>
</div>
{{/each}}
</div>
</div>
</div>
{{/each}}
</ul>
</div>
<div class="col-xs-6 col-sm-6">
<h2> Bad category </h2>
<ul class="fa-ul">
{{#each badCards}}
<div class="row">
<div id="card" class="card-panel red accent-4">
<span class="grey-text">
{{text}}
</span>
<div class="card-action">
<div class="chip">
<i id="deleteCardButton" class="material-icons fa fa-trash-o"></i>
Remove Card
</div>
{{#each tags}}
<div class="chip">
<tag class="tag" id="{{this}}">{{this}}</tag>
<i id="removeTag" class="material-icons fa fa-ban"></i>
</div>
{{/each}}
</div>
</div>
</div>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
</template>
JS:
Meteor.methods({
filterSingleTag: function(tag){
var numCards;
numCards = $(".card-panel").length;
for(var i = 0; i < numCards;i++){
var compTags;
var found;
found = false;
compTags = $(".card-panel").eq(i).find(".tag");
for(var j = 0; j < compTags.length; j++){
var str;
str = "" + compTags[j].firstChild;
if(str.toLowerCase() == tag){
found = true;
}
}
if(!found)
$(".card-panel").eq(i).hide();
}
},
filterMulitpleTags: function(tags){
var numCards;
numCards = $(".card-panel").length;
for(var i = 0; i < numCards;i++){
var compTags;
var found;
found = false;
compTags = $(".card-panel").eq(i).find(".tag");
for(var j = 0; j < compTags.length; j++){
var str;
str = "" + compTags[j].text;
if(tags.indexOf(str.toLowerCase()) >= 0)
found = true;
}
if(!found)
$(".card-panel").eq(i).hide();
}
},
clearFilter: function(){
var numCards;
numCards = $(".card-panel").length;
for(var i = 0; i < numCards;i++){
$(".card-panel").eq(i).show();
}
}
});
控制台:
Exception while invoking method 'filterSingleTag' ReferenceError: $ is not defined
I20160208-13:36:40.290(-6)? at [object Object].Meteor.methods.filterSingleTag (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/app/js/room.js:145:20)
I20160208-13:36:40.290(-6)? at maybeAuditArgumentChecks (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:1785:12)
I20160208-13:36:40.291(-6)? at /home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:872:20
I20160208-13:36:40.291(-6)? at [object Object]._.extend.withValue (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/meteor.js:1021:17)
I20160208-13:36:40.291(-6)? at /home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:871:41
I20160208-13:36:40.291(-6)? at [object Object]._.extend.withValue (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/meteor.js:1021:17)
I20160208-13:36:40.291(-6)? at /home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:870:46
I20160208-13:36:40.292(-6)? at tryCallTwo (/home/thouse/.meteor/packages/promise/.0.5.1.1550ocw++os+web.browser+web.cordova/npm/node_modules/meteor-promise/node_modules/promise/lib/core.js:45:5)
I20160208-13:36:40.292(-6)? at doResolve (/home/thouse/.meteor/packages/promise/.0.5.1.1550ocw++os+web.browser+web.cordova/npm/node_modules/meteor-promise/node_modules/promise/lib/core.js:171:13)
I20160208-13:36:40.292(-6)? at new Promise (/home/thouse/.meteor/packages/promise/.0.5.1.1550ocw++os+web.browser+web.cordova/npm/node_modules/meteor-promise/node_modules/promise/lib/core.js:65:3)
I20160208-13:36:40.293(-6)? at [object Object]._.extend.protocol_handlers.method (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:848:21)
I20160208-13:36:40.293(-6)? at /home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:729:85
答案 0 :(得分:0)
Meteor方法是在服务器上定义和执行的(也是客户端,具体取决于它们的定义位置)。由于服务器无法访问jQuery,因此未定义$并且它会引发错误。看起来你想在发生某些事情时只执行一些客户端代码。在这种情况下,您正在寻找事件:
在客户端js代码中:
Template.yourTemplateName.events({
'click #filterTagsButton' (event, template) {
// Your stuff from your question goes here.
}
});
根据你的例子,我不知道哪一个是单一对多,但我认为你可以从这里获得要点。我强烈建议您阅读the Meteor Guide这类事情。