调用Method' filterMulitpleTags':内部服务器错误[500]时出错

时间:2016-02-08 19:44:18

标签: javascript jquery meteor

我不明白为什么我得到这个内部服务器错误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

1 个答案:

答案 0 :(得分:0)

Meteor方法是在服务器上定义和执行的(也是客户端,具体取决于它们的定义位置)。由于服务器无法访问jQuery,因此未定义$并且它会引发错误。看起来你想在发生某些事情时只执行一些客户端代码。在这种情况下,您正在寻找事件

在客户端js代码中:

Template.yourTemplateName.events({
    'click #filterTagsButton' (event, template) {
        // Your stuff from your question goes here.
    }
});

根据你的例子,我不知道哪一个是单一对多,但我认为你可以从这里获得要点。我强烈建议您阅读the Meteor Guide这类事情。