logo标签列表

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

jquery-mobilemeteor
3
我正在使用Meteor构建一个应用程序，但不太清楚如何将所有代码与jQuery Mobile结合使用。
基本上，我在头部有一个编辑按钮，当点击它时，我希望内容区域中的内容更改，并且编辑按钮应更改为保存。单击保存按钮应更新内容并将按钮恢复到其原始状态。
编辑按钮如下所示：
<a data-icon="plus" data-role="button" class="edit" >edit</a>

这是一个没有JS / JQ的示例：http://jsfiddle.net/AU2cB/3/。当单击编辑按钮时，显示输入字段，并在单击保存时显示更新后的用户输入文本。显然，我还没有涉及服务器部分，因此如何使用Meteor完成该操作的任何建议都将是一个奖励（我已经使用{{> loginButtons}}使Facebook登录工作）。
请注意：我对所有这些都非常陌生。这是一个相对简单的应用程序，因此在根目录中，我只有一个HTML文件和一个带有if（Meteor.is_client）和if（Meteor.is_server）语句的JavaScript文件。
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函数并重新呈现fields模板。
要保存用户输入的数据，您也可以使用Session。我会让您自己解决这部分，它与我在此处编写的代码非常相似。要持久保存用户信息，请查看Meteor.user()和Collections。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接