javascript - 应该在哪里调用包含来自 Meteor 订阅的集合数据以及 jQuery DOM 操作的函数？

Question

我是 Web 应用程序的新手，偶然发现了 Meteor 中的一个问题，我还没有找到好的解决方案(如果 https://stackoverflow.com/ 上已经有答案，请告诉我)。

我有一个 profileEdit我想使用 Meteor.users 中的默认值更新模板页面呈现时的集合。使用 <input type="text"> 的模板助手可以很好地工作，但对于:

<select class="form-control" name="profileNamePrefix" id="profileNamePrefix">

和

<label><input type="radio" name="profileGender">Male</label>

我不得不使用 jQuery DOM 操作来让它工作(这可能是我真正的问题):

JS

// GLOBAL FUNCTIONS
updateSelectedOption = function() {
    var currentUserId = Meteor.userId();
    var currentUser = Meteor.users.findOne(currentUserId);
    var profileTitleOptions = $('#profileNamePrefix').children();
    var status = false;
    for (var i = 0; i < profileTitleOptions.length; i++) {
      if (currentUser && currentUser.profile &&
          currentUser.profile.title === profileTitleOptions[i].value) {
        profileTitleOptions[i].selected = true;
        statue = true;
        break;
      };
    };
    return status;
};

updateCheckedRadio = function() {
    var currentUserId = Meteor.userId();
    var currentUser = Meteor.users.findOne(currentUserId);
    var profileGenderRadios = $('input:radio[name="profileGender"]');
    var status = false;
    for (var i = 0; i < profileGenderRadios.length; i++) {
      if (currentUser && currentUser.profile && 
          currentUser.profile.gender === $(profileGenderRadios[i].closest('label'))[0].innerText) {
        $(profileGenderRadios[i]).attr("checked", "checked");
        status = true;
        break;
      };
    };
    return status;
};

这些函数有效，但我不知道在哪里放置函数调用。因为他们从 Meteor.users 获取数据Collection ，它们应该被称为助手(如讨论的 here ):

JS

Template.profileEdit.helpers({
  'selectOptionIfTitleIs': function() {
    return updateSelectedOption();
  },
  'checkRadioIfGenderIs': function() {
    return updateCheckedRadio();
});

HTML

<template name="profileEdit">
  <form role="form">
    <div class="row">
      <div class="col-sm-2">
        <div class="form-group">
          <label>Title</label>
          <select class="form-control" name="profileNamePrefix" id="profileNamePrefix">
            <option value="Mr">Mr.</option>
            <option value="Ms">Ms.</option>
            <option value="Mrs">Mrs.</option>
            <option value="Dr">Dr.</option>
            <option value="Prof">Prof.</option>
            <option value="Sir">Sir</option>
          </select>
          {{#if selectOptionIfTitleIs}}
          {{/if}}
        </div>
      </div><!-- /.col-sm-2 -->
      <div class="col-sm-2">
        <div class="radio">
          <label><input type="radio" name="profileGender">Male</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="profileGender">Female</label>
        </div>
      </div><!-- /.col-sm-2 -->
      {{#if checkRadioIfGenderIs}}
      {{/if}}
    </div>
  </form>
</template>

这在页面刷新时起作用，但是当它通过 Router.go('profileEdit'); 从导航栏重定向时它不会更新选定/选中的值，因为 jQuery 调用是空的(我怀疑这是因为它们是在正确呈现 HTML 之前执行的)。将函数调用添加到 onRendered()解决了这个问题，但在刷新页面时不起作用。

JS

Template.profileEdit.onRendered(function() {
  updateSelectedOption();
  updateCheckedRadio();
});

有没有办法统一这两个函数调用并在页面重定向和刷新时保持表单更新？关于如何在 Meteor 中以更好的方式实现更新功能的任何提示，我们也很感激。

已编辑

经过一番思考并从 Peter 的解决方案获得一些帮助后，我最终通过仅使用空格键和模板助手解决了这个问题:

HTML

<form role="form">
    <div class="col-sm-2">
      <div class="form-group">
        <label>Title</label>
        <select class="form-control" name="profileNamePrefix" id="profileNamePrefix">
        {{#each namePrefixes}}
          <option value="{{value}}" selected="{{prefixIsSelected}}">{{name}}</option>
        {{/each}}
        </select>
      </div>
    </div><!-- /.col-sm-2 -->
    <div class="col-sm-2">
      {{#each genders}}
        <div class="radio">
          <label><input type="radio" name="profileGender" checked="{{genderIsChecked}}">{{name}}</label>
        </div>
      {{/each}}
    </div><!-- /.col-sm-2 -->
</form>

JS

Template.profileEdit.helpers({
  namePrefixes: [{
      name: "Mr.",
      value: "Mr"
    },
    {
      name: "Ms.",
      value: "Ms"
    },
    {
      name: "Mrs.",
      value: "Mrs"
    },
    {
      name: "Dr.",
      value: "Dr"
    },
    {
      name: "Prof.",
      value: "Prof"
    },
    {
      name: "Sir",
      value: "Sir"
    }
  ],
  genders: [{name: "Male"},
            {name: "Female"}
  ],
  'prefixIsSelected': function() {
    var currentUserId = Meteor.userId();
    var currentUser = Meteor.users.findOne(currentUserId);
    return currentUser && currentUser.profile && currentUser.profile.title === this.value;
  },
  'genderIsChecked': function() {
    var currentUserId = Meteor.userId();
    var currentUser = Meteor.users.findOne(currentUserId);
    return currentUser && currentUser.profile && currentUser.profile.gender === this.name;
  }
});

这样，当重定向或刷新时，表单会正确更新。剩下的唯一问题是，如果我将被迫通过依赖于数据集合的 jQuery 更新某些内容，那么从哪里调用该代码？或者是否总是可以使用空格键找到“ meteor 之路”？

提前致谢

Answer 1

您可以使用直接在模板中返回 true/false 的模板助手。以下解释假定您当前的数据上下文 (this) 是您的用户或拥有数据的配置文件:

单选按钮和复选框

<input name="gender" type="radio" checked="{{genderCheck 'male'}}"/> Male

然后声明一个模板助手:

genderCheck: function(value) {
    return (this.profile.gender == value);
}

禁用属性的工作方式相同。 Blaze(Meteor 模板)在交付 DOM 时删除过时的选中和禁用属性。

选择

<select name="salutation">
  <option selected="{{checkSalutation 'Mr'}}">Mr</option>
  <option selected="{{checkSalutation 'Mrs'}}">Mrs</option>
  ..
</select>

还有助手:

checkSalutation: function(value) {
    return (this.profile.salutation == value);
}

如果您有一个 {{#each ..}} 循环，您可以根据需要将元素或元素的属性传递给帮助程序。如果您不这样做，您仍然可以使用 Javascript 代码中的 this 访问它。模板助手将 this 称为当前数据上下文(例如，在循环内当前循环元素)。