Question

我使用Meteor创建了一个快速的聊天演示，如下所示： My quick little bad looking demo

在我所拥有的部分＆＃34;嗨＆＃34;我现在想按照进入那里的术语进行过滤。所以在这种情况下＆＃34;嗨＆＃34;应该显示消息＆＃34;嗨那里＆＃34;。但是，我不确定如何强制模板更改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
  });
}

Answer 1

我有点困惑你想要做什么，但要获得重新渲染魔法，你需要使用反应变量。使用会话或反应变量。

模板助手是反应性上下文，但如果您不在一个中，请查看文档中的自动运行。

使用meteorjs过滤一些输入的聊天模板

1 个答案: