Question

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

当我使用{{#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);

要进行绿色检查，您需要提供一种方法来调用Decoy Input点击功能中的所有4个{{#decoy-Input class="fieldInput"}} {{/decoy-Input}}块。它不需要与JQuery一起使用。

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

Answer 1

这是其中一个例子，你真的只想利用Ember的运行循环和DOM挂钩。

将整个石邦包裹在一个视图中：

{{#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');
    });
  }
});

如果没有太多的仪式，那就应该给你你想要的东西。希望有所帮助，如果我能进一步解释，请告诉我！

我希望我的View能够识别另一个View的类

1 个答案: