gpt4 book ai didi

javascript - Meteor 中的 DOM 操作

转载 作者:行者123 更新时间:2023-11-28 00:25:36 26 4
gpt4 key购买 nike

我想了解 Meteor 中的 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
});

我从数据库获取学生信息列表并将其显示在模板中。现在,每个学生都有一个编辑按钮。当用户单击此编辑按钮时,我想将学生的“姓名”和“年龄”字段更改为文本字段,并提供“保存”和“取消”选项。

同样,我在模板末尾有一个“添加学生”按钮。当用户单击它时,我想显示一个表单,其中添加并保存学生的姓名和年龄。

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

无论如何请告诉我如何在 meteor 中实现此功能。或者只是一些可能的方法。

感谢帮助。

最佳答案

这是实现这一目标的一种可能方法。

让我们尝试逐步执行

首先,这就是 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>
}
})

如果您发现没有太多代码(我猜),您就会了解如何使用 session 来执行简单的 CRUD 操作。

我做了一个Meteorpad这个工作示例,请检查它。

关于javascript - Meteor 中的 DOM 操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29529409/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com