DOM manupulation in meteor

Question

I want to know abt DOM manipulation in meteor. My code goes as follows:

    <template name = "studentList">

    {{#each}}
        <div class = "name">
            Name: {{this.name}}
        </div>

        <div class = "age">
            Age: {{this.age}}
        </div>
        <button class = "edit"> Edit </button>
    {{/each}}

    <button class = "addStudent"> Add Student </button>
</template>


Template.studentList.helpers({
    studentlist:function(){
        return Students.find();
    }
});

Template.studentList.events({
    //I am doing the DOM manupulation here based on the buttons clicked
});

I get a list of Student Info from the DB and display them in the template. Now for each student, there is an edit button. When user clicks this edit button, I want to change the "name" and "age" field of the student as text field and give an option to "save" and "cancel".

Similarly, I have an "add student" button at the end of the template. When a user clicks it, I want to display a form, where student's name and age is added and then saved.

So far, I am being able to do this, but in a very naive way by using lots of Jquery/Javascript code in the events of studentList. I read many post that says this is not the correct way.

Can anyway please tell how can this feature be achieved in meteor. Or just to some possible ways of doing it.

Help appreciated.

Answer 1

This is a possible way to accomplish this.

Lets try to do this step-by-step

First this is how the HTML should look.

{{#if  editName}} <!-- editName template helper -->
   <!-- If the Session is equal to true this part of the html will be showed -->
    <input type="text" class="newName" value="{{this.name}}" />
  {{else}}
    <!-- this is what we show by default on the view, if user click the div, the input will be showed -->
    <div class="name">Name: {{this.name}} </div>
{{/if}}

Now the JS.

The helper should look like this.

Template.studentList.helpers({tName:function(){
      return Session.get("studentName" + this._id); //getting the session true or false.
    }
});

And the Events.

Template.studentList.events({
  'click .name' : function(event,template){
     //On this event we are Setting the Session to true and holding the id of the student
     return Session.set("studentName" + this._id,true)
   },
   'keypress .newName':function(event,template){
      //Some keypress to update the value 
       //using http://docs.meteor.com/#/full/template_$ to get the value using meteor
       var newNameStudent = template.$('.newName').val();
       if(event.keyCode == 13){ //if enter lets update the value
           Students.update({_id:this._id},{$set:{name:newNameStudent}})
           return Session.set("studentName" + this._id,false) //setting to false the session to hide the input and show the <div>
         }
     },
     'click .cancel':function(){
        return Session.set("studentName" + this._id,false) //setting to false the session to hide the input and show the <div>
       }
  })

If you see there is not too much code (i guess), you get the idea how to use the sessions to do simple CRUD operations.

I made a Meteorpad of this working example, check it.