javascript - 我希望我的 View 能够识别其他 View 的类

我有四个名为{{#decoy-Input class="fieldInput"}} {{/decoy-Input}}的车把帮助器块，我想通过调用其类'fieldInput'来用Jquery引用它们

虽然在我使用{{#decoy-Input class="fieldInput"}} {{/decoy-Input}}时未调用fieldInput类

我猜想这与呈现视图的顺序有关，但我需要第二种意见。

这是定义它们的视图。

VpcYeoman.DecoyInputView = Ember.View.extend({
  tagName: 'div',
  click: function(e) {
    console.log('CanFocusInputView clicked')
    $('.fieldInput').removeClass('.focusedInput');
    this.$().addClass('focusedInput');
  },
});

Ember.Handlebars.helper('decoy-Input', VpcYeoman.DecoyInputView);

要获得绿色对勾，您需要提供一种方法来调用“诱饵输入”单击功能内的所有4个{{#decoy-Input class="fieldInput"}} {{/decoy-Input}}块。它不需要与JQuery一起使用。

我意识到像'this.$().parent().siblings('.objectInput').children().removeClass('focusedInput');'这样的解决方案也可以解决此问题，但是感觉很糟糕。

最佳答案

如果您确实只想利用Ember的运行循环和DOM挂钩，则这是其中一种情况。

将整个shibang包裹在一个视图中：

{{#view VpcYeoman.InputsView}}
  <input type="text" name="name"/>
  <input type="email" name="email"/>
  <!-- even better, use the input helper to bind the value -->
  {{input type="checkbox" name=name}}
{{/view}}

现在，启动该视图并利用didInsertElement钩子编写一些无聊的jQuery :)而且无聊，我的意思不是Ember。

VpcYeoman.InputsView = Ember.View.extend({
  didInsertElement: function () {
    var $inputs = this.$('input');

    $inputs.on('focus', function (e) {
      $(this).addClass('focusedInput');
    });

    $inputs.on('blur', function (e) {
      $(this).removeClass('focusedInput');
    });
  }
});

无需过多的仪式就可以为您提供所需的东西。希望能对您有所帮助，并让我知道是否可以进一步解释！