Javascript 使用meteorjs过滤一些输入的聊天模板
我创建了一个使用Meteor聊天的快速小演示,如下所示: 在我有“Hi”的部分,我现在想通过输入的术语进行过滤。因此,在这种情况下,“Hi”应该显示消息“Hi there”。但是,我不确定如何强制模板更改HTML。我正在使用帮助程序返回集合:Javascript 使用meteorjs过滤一些输入的聊天模板,javascript,meteor,Javascript,Meteor,我创建了一个使用Meteor聊天的快速小演示,如下所示: 在我有“Hi”的部分,我现在想通过输入的术语进行过滤。因此,在这种情况下,“Hi”应该显示消息“Hi there”。但是,我不确定如何强制模板更改HTML。我正在使用帮助程序返回集合: Template.body.helpers({"allmessages": function(){ return mMessages.find({text : {$regex : ".*"+ mSearchQuery + ".*"}});
Template.body.helpers({"allmessages": function(){
return mMessages.find({text : {$regex : ".*"+ mSearchQuery + ".*"}});
}})
我熟悉可观察的设计模式,但就我的一生而言,我不知道如何告诉模板它的依赖关系已经改变。谢谢你的帮助
HTML:
我有点搞不懂你想做什么,但要想获得重播的魔力,你需要使用反应变量。使用会话或被动变量
模板帮助程序是被动上下文,但如果您不在其中,请查看文档中的自动运行 在集合名称和变量之前不需要所有的m。。。
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>hello</title>
</head>
<body>
<div class="row base-container">
<div class="col s12 indigo lighten-3 chat-container row">
{{#each allmessages}}
{{>templatemessage}}
{{/each}}
</div>
<form class="col s12 blue lighten-3 row small-container">
<textarea class="col s9 chat-input"></textarea>
<div class="col s2 offset-s1 row">
<button class="col s12 btn waves-effect waves-light send-button" type="submit" name="action"><span class="submit-text">Submit</span>
<i class="material-icons">send</i>
</button>
<input type="text" class="search-query col s10"/>
<i class="material-icons s2 col">search</i>
</div>
</form>
</div>
</body>
<template name="templatemessage">
<div class="row message-container col s12">
<div class="user-name col s3"></div>
<div class="user-message col s9">{{text}}</div>
</div>
</template>
mMessages = new Meteor.Collection("messages");
mUsers = new Meteor.Collection("users");
var mSearchQuery = "";
var mCurrentUser = null;
if (Meteor.isClient) {
$(function () {
$(".search-query").enterKey(function(event){
event.preventDefault();
mSearchQuery = $(this).val();
Template.body.registerhe
return false;
})
});
$.fn.enterKey = function (fnc, mod) {
return this.each(function () {
$(this).keypress(function (ev) {
var keycode = (ev.keyCode ? ev.keyCode : ev.which);
if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
fnc.call(this, ev);
}
})
})
}
Template.body.events({
"click .send-button" : function(event){
var test = $("textarea.chat-input");
mMessages.insert({"user" : mCurrentUser, "text" : test.val()})
test.val('');
return false;
}
})
Template.body.helpers({"allmessages": function(){
return mMessages.find({text : {$regex : ".*"+ mSearchQuery + ".*"}});
}})
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}