Search code examples
javascriptmeteorspacebarsmeteor-helper

How Do I Create Meteor Template Helper to Check Equality?


I am making a chat web app. people can login with facebook and talk (insert message into mongoDB).

showing the text is simple: javascript:

  messages: function () {
    return Messages.find({}, {sort: {createdAt: 1}});
  } 

each message has these attributes:

text: text,
      createdAt: new Date(),            // current time
      owner: Meteor.userId(),           // _id of logged in user
      username: Meteor.user().profile.name

It works fine, but I want to "style the message differently" depending on whether the message's owner is equal to currentUser (i.e. whether it's my message or others message)

For example, I want my message to be float:right and others message to be float:left

I am thinking the code probably looks something like this:

  {{#if mymsg}}
    <div class="msgdiv_my">
       <span class="message">{{text}}</span>
    </div>
  {{else}}
    <div class="msgdiv">
      <span class="message">{{text}}</span>
    </div>
  {{/if}}

Where and how to write the mymsg function (which should return True if the message.owner == currentUser, and false otherwise)


Solution

  • You would usually write those checks in a template helper, like this:

    Template.myTemplate.helpers({
      ownDocument: function (doc) {
        return doc.owner === Meteor.userId();
      }
    });
    

    Then in myTemplate, call your helper like this:

    <template name="myTemplate">
      {{#if ownDocument text}}
        <div class="msgdiv_my">
           <span class="message">{{text}}</span>
        </div>
      {{else}}
        <div class="msgdiv">
          <span class="message">{{text}}</span>
        </div>
      {{/if}}
    </template>
    

    Although you may want to implement a global "equals" helper to your meteor app's client, as it sadly is not built in Meteor Spacebars yet:

    Template.registerHelper('equals',
        function(v1, v2) {
            return (v1 === v2);
        }
    );
    

    This way, you would call:

    {{#if equals text.owner currentUser._id}}
    

    And get the same result.

    KyleMit wrote a lengthy answer for all your equality check needs in Meteor.