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。
另请注意，由于上述命名约定（非常有用，因为您自己会看到！），Ember知道{{view "class-link"}}应该呈现App.ClassLinkView。

要运行此示例，您必须包含完整 Handlebars（即handlebars.min.js，而不是handlebars.runtime.min.js），因为它包含模板编译器。

此代码正在运行，还有一点in this JSFiddle。有关视图的更多信息，特别是Ember.View guide中的HTML属性。

如何在＆＃34; action＆＃34;中添加一个类？恩伯的项目？

1 个答案: