Search code examples
javascriptmongodbmeteormeteor-blaze

Meteor Blaze - Differentiating Between Classes

In my current project the user can create a post and each post is iterated on a page.

I run into the problem of conflicting classes.

I have a checkbox that has the class attend however it conflicts with other posts and with the 'click .attend' function I created.

Is there any way to create a unique class for each post?

I have tried doing: 

<input type="checkbox" id="check" class="{{this._id}}" checked="" />

but the function doesn't allow 

'click .this._id'

I am stuck on what to do.

Solution

  • Sounds like you are going about it in slightly the wrong way. You can have the same class, but what you need to is to put a template for each post. That template can easily get to the correct class for each of the instances of that template.

        <head>
  <title>demosub</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> allposts}}

</body>
<template name="allposts">
   {{#each posts}}
      {{> thepost }}
   {{/each}}
</template>

<template name="thepost">
   <div>
     <span>{{_id}}</span>
      <input type="checkbox" class="attend" checked="" />
    </div>
</template>

    then in your event code for the template 'thepost'

    import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';


Template.allposts.helpers({
  posts() {
    return [{_id: 1}, {_id: 2}]
  },
});

Template.thepost.events({
  'click .attend': function(e,t){
    var data = Template.instance().data  // this is your post...
    console.log(e.toElement.checked)
    console.log(data)
  }
})

    below you can see where I click on each of the check box and how it knows which post it is clicked on :-

    enter image description here

    The template event knows that click event on the class "attend" is associated with an instance of the template and calls that event handler.