DOM manupulation in meteor

Question

Я хочу знать abm DOM манипуляции в метеор. Мой код выглядит следующим образом:

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

получить список Студенческого информации из БД и отображать их в шаблоне. Теперь для каждого ученика есть кнопка редактирования. Когда пользователь нажимает на эту кнопку редактирования, я хочу изменить поле «имя» и «возраст» ученика как текстовое поле и дать возможность «сохранить» и «отменить».

Аналогичным образом, у меня есть кнопка «добавить ученика» в конце шаблона. Когда пользователь нажимает на нее, я хочу отобразить форму, где имя и возраст ученика добавляются, а затем сохраняются.

До сих пор я был в состоянии сделать это, но очень наивным образом, используя большое количество кода JQuery/Javascript в событиях studentList. Я прочитал много сообщений, в которых говорится, что это не правильный путь.

В любом случае, пожалуйста, расскажите, как эта функция может быть достигнута в метеоре. Или просто для некоторых возможных способов сделать это.

Помогите оценить.

Answer 1

Это возможный способ достичь этого.

Давайте попробуем сделать это шаг за шагом

Во-первых, это как HTML должно выглядеть.

{{#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}} 

Теперь JS.

Помощник должен выглядеть следующим образом.

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

И события.

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

Если вы видите, не слишком много коды (я думаю), вы получите представление, как использовать сессии для выполнения простых операций CRUD.

Я сделал Meteorpad настоящего рабочего примера, проверьте его.