jay*_*ong 3 jquery-mobile meteor
我正在使用Meteor构建一个应用程序,并且有点不清楚所有代码如何使用jQuery Mobile组合在一起.
基本上我在标题中有一个编辑按钮,当点击时我想要更改内容部分中的内容,编辑按钮应该更改为说保存.单击"保存"按钮应更新内容并将按钮恢复为原始状态.
编辑按钮看起来像:
<a data-icon="plus" data-role="button" class="edit" >edit</a>
这是一个没有JS/JQ的小提琴:http://jsfiddle.net/AU2cB/3/
想法是在单击编辑按钮时显示输入字段,并在单击保存时显示更新的用户输入文本.我显然没有达到服务器的这一部分,所以任何有关如何使用Meteor的建议将是一个奖励(我使用{{> loginButtons}}进行facebook登录工作)
NB:我对所有人都很陌生.这个的.这是一个相对简单的应用程序,所以在根目录中我只有1个html文件和一个带有if(Meteor.is_client)和if(Meteor.is_server)语句的javascript文件.
假设您的按钮位于模板中:
<body>
{{> editButton}}
{{> fields}}
</body>
<template name="editButton">
<a data-icon="plus" data-role="button" class="edit" >edit</a>
</template>
要使用Meteor进行连接,请将事件附加到模板:
Template.editButton.events({
"click [data-role='button']": function(e) {
if ($(e.target).text() == "edit")
$(e.target).text("save");
else
$(e.target).text("edit");
}
});
当您单击按钮时,将切换按钮的文本.那么显示或隐藏相关字段呢？我们可以使用Session:
Template.editButton.events({
"click [data-role='button']": function(e) {
if ($(e.target.text() == "edit") {
$(e.target).text("save");
Session.set("editing", true);
}
else {
$(e.target).text("edit");
Session.set("editing", false);
}
}
});
现在你需要听取它的值editing并用它来告诉Meteor是否应该显示相关的字段:
<template name="fields">
{{#if editing}}
<input type="text" name="myField"/>
{{/if}}
</template>
Template.fields.editing = function() {
return Session.get("editing");
}
现在,当您单击按钮时,Meteor将更新关联的Session密钥的值,并且因为Session是被动的,它将重新运行Template.fields.editing函数并重新呈现字段模板.
要保存用户输入的数据,您还可以使用Session.我会让你自己弄清楚这部分,它与我在这里写的代码非常相似.要持久保存用户信息,请查看Meteor.user()和Collections.
| 归档时间： |
|
| 查看次数： |
1641 次 |
| 最近记录： |