Question

我想知道流星中的abt 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
});

我从数据库中获取学生信息列表并将其显示在模板中。现在，每个学生都有一个编辑按钮。当用户点击此编辑按钮时，我想更改＆＃34;名称＆＃34;和＆＃34;年龄＆＃34;作为文本字段的学生的字段，并提供选项＆＃34; save＆＃34;和＆＃34;取消＆＃34;。

同样，我有一个＆＃34;添加学生＆＃34;模板末尾的按钮。当用户点击它时，我想显示一个表单，其中添加了学生的姓名和年龄，然后保存。

到目前为止，我能够做到这一点，但是通过在studentList的事件中使用大量的Jquery / Javascript代码，这是一种非常天真的方式。我读了许多帖子说这不是正确的方法。

无论如何，请告诉我如何在流星中实现此功能。或者只是采取一些可能的方式。

帮助表示赞赏。

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，检查一下。

流星中的DOM操纵

1 个答案: