如何在Ember中的“操作”項中添加類？

Question

我似乎在任何地方都找不到這個（也許是？）簡單問題的解決方案。

我有一個鏈接，單擊該鏈接時需要添加一個類。 我有一個像這樣設置的動作：

HTML：

<a href="#" {{action "addClass"}}>Link</a>

JS：

App.PageController = Ember.Controller.extend({
  actions: {
    addClass: function() {
      // SOMETHING HERE
    }
});

我嘗試使用“ addClass”，但這不起作用–而且我不確定如何引用放置操作的項目（通常會是“ this”，但我指的是操作）。

Answer 1

我認為這是Ember View的用例。

您可以這樣定義視圖：

App.ClassLinkView = Ember.View.extend({
    tagName: 'a',
    classNameBindings: ['myClass'],
    template: Handlebars.compile('Link'),
    click: function() {
        this.set('myClass', true);
    }
});

然后可以將其放在模板中，而不是鏈接，以便呈現視圖：

{{view "class-link"}}

或者（如果您使用的是舊版本的Ember）：

{{view App.ClassLinkView}}

一些解釋不會有任何傷害。 視圖提供了一種封裝HTML內容和處理交互的方法。 讓我們分解一下：

• 由於具有tagName屬性，因此打開<a>和關閉</a>將包含視圖的內容，該內容由template屬性定義。
• click屬性接收一個將在click事件上執行的功能。
• 綁定到click事件的函數將視圖上的myClass屬性設置為true。 this引用視圖本身（而不是其元素）。
• 由於myClass是在classNameBindings數組中定義的，因此默認情況下不會將其添加到視圖元素（ <a>標記）中。 但是，當視圖的相應屬性為true時，會將相應的類添加到視圖的元素中。 注意：由於Ember中的命名約定，您a元素將被分配為my-class而不是myClass my-class 。
• 還要注意，由於上述命名約定（您將自己看到，這確實很有用！），Ember知道{{view "class-link"}}應該呈現App.ClassLinkView 。

要運行此示例，必須包含完整的 Handlebars（即handlebars.min.js ，而不是handlebars.runtime.min.js ），因為它包含模板編譯器。

此代碼在JSFiddle中有效 ，還有更多內容 。 在Ember.View指南中 ，有關視圖的詳細信息，尤其是HTML屬性。