EmberJS - 如何在点击上添加一个类？ [英] EmberJS - how to add a class on click?

问题描述

在我的列表中，当用户点击应该添加一个类名称作为突出显示的水果时。我正在努力，但不工作。有人帮我吗（当用户选择其他水果，以前的水果亮点必须删除），所以只有一个水果突出点击。

这是我的尝试：

c>< h2>这是从索引页面< / h2>
< ul>
{{#each model as | fruit |}}
< li {{actionselectedfruit}} class ={{if isSelected'highlight''''}}> {{果}}< /锂>
{{/ each}}
< / ul>

我的路线：

从$ ember导入Ember; 
 
导出默认值Ember.Route.extend（{
 isSelected：false，
 model（）{
 return [Mango，Orange，Apple ] 
}，
 
 actions：{
 selected（fruit）{
 console.log（fruit）; 
 this.toggleProperty（'isSelected'） ; 
} 
} 
}）; 
  

提前感谢

解决方案

您将路由的范围与控制器的范围混淆。

当您在模板中时，范围是Controller，而不是Route。该模板无法访问在路线上设置的属性。

您的操作处理程序仍然可以工作的原因是因为在Ember操作中，起泡，首先是Controller到路线，直到找到一个需要的名称的动作。

解决方案是把你的逻辑放在一个控制器中：

 导出默认值Ember.Controller.extend（{
 isSelected：false，
 
 actions：{
 selected ）{
 this.toggleProperty（'isSelected'）; 
} 
} 
}）; 
  

路线

  export default Ember.Route.extend（{
 model（）{
 return [Mango，Orange，Apple] 
} 
}） ; 
  

控制器可以访问模型的原因属性的路由是因为Route有一个钩子叫 setupController ，默认情况下这样做：

  setupController（controller，model）{
 controller.set（'model'，model）; 
} 
  

---

一次突出显示一个元素。

一个快速而简单的方法是，而不是 isSelected ，你保存 selectedIndex 。那么你可以将突出显示的类应用到一个项目，如果它的索引匹配所选的索引。

控制器

  export default Ember.Controller.extend（{
 selectedIndex：false，
 
 actions：{
 selected（idx）{
 this.set（'selectedIndex'，idx）; 
} 
} 
}）; 
  

模板：

 code>< h2>这是从索引页面< / h2> 
< ul> 
 {{#each model as | fruit i |}} 
< li {{actionselectedi}} class ={{if（is-equal i selectedIndex）'highlight''' }}> {{fruit}}< / li> 
 {{/ each}} 
< / ul> 
  

您还需要创建一个帮助器进行平等比较

  // helpers / is-equal.js 
 import Ember from'ember'; 
 
导出函数isEqual（[a，b]）{
 return a === b; 
} 
 
导出默认值Ember.Helper.helper（isEqual）; 
  

或使用真正好帮手库：这是一个ember-twiddle示例。

In my list, when a user click on a fruit that should added a class name as highlight. I am trying for that, But not working. any one help me here? ( when user select other fruit, the previous fruit highlight has to removed ) so only one fruit highlighted on click.

here is my try :

twiddle here

my template :

<h2>This is from Index page</h2>
<ul>
{{#each model as |fruit|}}
    <li {{action "selected" fruit}} class="{{if isSelected 'highlight' ''}}" >{{fruit}}</li>
{{/each}}
</ul>

my route :

import Ember from 'ember';

export default Ember.Route.extend({
  isSelected : false,
  model(){
    return ["Mango","Orange","Apple"]
  },

  actions : {
    selected(fruit){
      console.log( fruit );
        this.toggleProperty('isSelected');
    }
  }
});

Thanks in advance

解决方案

You're confusing the scope of the Route with the scope of the Controller.

When you're inside a template, the scope is the Controller, not the Route. The template doesn't have access to properties set on the Route.

The reason your action handler still works is because in Ember actions bubble up, first to the Controller, then to the Route, until it finds a an action with the needed name.

The solution is to put your logic inside a Controller:

export default Ember.Controller.extend({
  isSelected : false,

  actions : {
    selected(fruit){
      this.toggleProperty('isSelected');
    }
  }
});

Route

export default Ember.Route.extend({
  model(){
    return ["Mango","Orange","Apple"]
  }
});

The reason the Controller has access to the model property from the Route is because Route has a hook called setupController that by default does this:

setupController(controller, model) {
  controller.set('model', model);
}

---

Answer for your comment of highlighting one element at a time.

A quick and easy approach would be to, instead of isSelected, you save selectedIndex. Then you can just apply the highlighted class to an item if its index matches the selected index.

Controller

export default Ember.Controller.extend({
  selectedIndex : false,

  actions : {
    selected(idx){
      this.set('selectedIndex', idx);
    }
  }
});

Template:

<h2>This is from Index page</h2>
<ul>
{{#each model as |fruit i|}}
    <li {{action "selected" i}} class="{{if (is-equal i selectedIndex) 'highlight' ''}}" >{{fruit}}</li>
{{/each}}
</ul>

You will also need to create a helper for equality comparison

// helpers/is-equal.js
import Ember from 'ember';

export function isEqual([a, b]) {
  return a === b;
}

export default Ember.Helper.helper(isEqual);

Or use the really good helper library: ember-truth-helpers.

Here's an ember-twiddle example.

这篇关于EmberJS - 如何在点击上添加一个类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！