jquery - 有了 Meteor，为什么 DOM 操作永远不能用 jQuery 来完成？

Question

我很好奇这个说法的有效性:

A good rule of thumb is that if you're using jQuery to manipulate any DOM elements, you're probably doing it wrong.

来自这个问题的答案:Meteor - How can I pass data between helpers and events for a template?

在我看来，jQuery 很好，因为它可以像外科手术一样操作 DOM 的许多小部分，而无需更改整个代码块。

Meteor 中的模板很棒，因为这正是它们所做的 - 它们可以将整个代码块或小东西替换为其他东西，但代价是每次都必须显式定义它并重新定义实际上并不需要的代码。改变。

示例 - 在获得焦点时，jQuery 删除了idleField 类，添加了focusField 类，并将占位符更改为其他文本:

<input class="idleField" id="first_name" name="firstName" type="text" placeholder="First Name" maxlength="10"/>

$('input[type="text"]').focus(function() {
  $(this).removeClass("idleField").addClass("focusField").attr("placeholder", "First Name NOW");
});

结果是

<input class="focusField" id="first_name" name="firstName" type="text" placeholder="First Name NOW" maxlength="10"/>

jQuery 简短而有趣，其目标只是切换类和占位符。

但是使用 Meteor 模板，相同的结果将类似于:

<input {{toggleClassAndEditPlaceholder}} maxlength="10"/>

Session.set('toggleClassEditPlaceholderSessionVar', ' class="idleField" id="first_name" name="firstName" type="text" placeholder="First Name" ');

Template.form.helpers({
  toggleClassAndEditPlaceholder: function() {
    return Session.get('toggleClassEditPlaceholderSessionVar');
)};

Template.form.events({
  'focus input[type="text"]': function () {
    Session.set('toggleClassEditPlaceholderSessionVar', ' class="focusField" id="first_name" name="firstName" type="text" placeholder="First Name NOW" ');
  }
});

Meteor 方式更加冗长，至少在这个示例中，包括冗余项(id、名称和类型不变，只有类和占位符)。 jQuery 仅针对类和占位符，而忽略其他所有内容。然而，模板有时必须包含许多无关的内容。当然，在此示例中，我可以在代码中并排移动占位符和类，以便在定义模板时 id、名称和类型保持不变，但在其他一些代码中您将无法这样做。

那我做错了什么？在 Meteor 中是否应该有一种更有效的方法来实现这一点，比单个 jQuery 行更有效？

Answer 1

相关声明是九个月前做出的。这在当时非常重要。从那时起 Meteor UI 引擎接受了彻底的检修。这一变化的关键点之一是使引擎对 JQuery 更加友好。以前，当您使用 JQuery 进行更改时，Meteor 很可能会在重绘时恢复该更改。现在它以更聪明的方式进行更改，因此可以安全地使用纯 JQuery 更改元素状态。

话虽这么说，仔细考虑您需要的更改是否真的最好使用 JQuery 来完成，这仍然是一个很好的做法。具体来说，最好将所有与数据相关的更改留给 Meteor。然而，在您的情况下，您纯粹根据 UI 组件的状态来更改其行为。因此，事实上，要单独使用 Meteor 进行更改，您需要创建一个人工数据对象，而且实际上，在这种情况下最好只使用 JQuery。

 

<小时/>

 

除此之外，您的 Meteor 代码本身也可以得到显着改进。您不需要在助手中传递所有标签属性，更改您需要的内容就足够了:

<input id="..." type="..." name="..." class="{{class}}" placeholder="{{placeholder}} maxlength="10"/>

Template.form.helpers({
  class: function() {
    return Session.get('toggled') ? 'focusField' : 'idleField';
  },
  placeholder: function() {
    return Session.get('toggled') ? 'focusPlaceholder' : 'idlePlaceholder';
  },
)};

Template.form.events({
  'focus input[type="text"]': function () {
    Session.set('toggled', true);
  },
});