Question

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

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

“编辑”按钮如下所示：

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

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

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

NB：我对所有人都很陌生。这个的。这是一个相对简单的应用程序，因此在根目录中我只有1个html文件和一个带有if（Meteor.is_client）＆amp;的javascript文件。 if（Meteor.is_server）语句。

Answer 1

假设您的按钮位于模板中：

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

使用Meteor和jQuery Mobile更改按钮文本/图像

1 个答案: