2015-06-27 17 views
0

一些進入聊天模板,我創建使用流星聊天的一個小巧的演示看起來是這樣的:My quick little bad looking demo過濾器使用meteorjs

在部分,在那裏我有「你好」,我想現在過濾由術語進入那裏。所以在這種情況下,「嗨」應該顯示消息「你好」。不過,我不確定如何強制模板更改HTML。我使用一個輔助拿到返回的集合:

Template.body.helpers({"allmessages": function(){ 
     return mMessages.find({text : {$regex : ".*"+ mSearchQuery + ".*"}}); 
     }}) 

我熟悉的可觀察到的設計模式,但對我的生活我無法弄清楚如何告訴它的依賴已經改變模板。謝謝你的幫助!

HTML:

<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> 

的Javascript =

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 
    }); 
} 
+0

不需要收集名稱和變量之前的所有m ... –

回答

0

我有點糊塗了,你想做的事,但要獲得你需要使用反應變量重新呈現神奇的東西。使用會話或反應變量。

模板幫助程序是被動的上下文,但如果你不在其中,請查看文檔中的自動運行。