3

我正在使用 Meteor 构建一个应用程序，但有点不清楚所有代码如何使用 jQuery Mobile 组合在一起。

基本上我在标题中有一个编辑按钮，单击时我希望内容部分中的内容发生更改，并且编辑按钮应该更改为保存。单击保存按钮应更新内容并将按钮恢复为原始状态。

编辑按钮如下所示：

<a data-icon="plus" data-role="button" class="edit" >edit</a>

这是一个没有 JS/JQ 的小提琴：http: //jsfiddle.net/AU2cB/3/

这个想法是在单击编辑按钮时显示输入字段，并在单击保存时显示更新的用户输入文本。我显然还没有进入服务器部分，所以任何关于如何使用 Meteor 做到这一点的建议都会是一个奖励（我让 facebook 登录使用 {{> loginButtons }}）

注意：我对所有人都很陌生。这个的。这是一个相对简单的应用程序，所以在根目录中我只有 1 个 html 文件和一个 javascript 文件，其中包含 if (Meteor.is_client) 和 if (Meteor.is_server) 语句。

4

1 回答 1

5

假设您的按钮在模板中：

<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。

于 2012-12-26T20:20:31.187 回答