如何动态地将类应用到ember-cli中的对象？ [英] How to dynamically apply classes to objects in ember-cli?

问题描述

我正在创建一个应用程序，其中包含项目列表和顶部的一系列过滤器按钮。当用户应用不同的过滤器时，我希望按钮使用CSS类更改样式，以将其显示为启用/禁用。

I'm creating an app that has a listing of items and a series of filter buttons at the top. As the user applies different filters, I want the buttons to change style using CSS classes to show them as enabled/disabled.

我想要能够写出类似于代码如下，但不起作用。

I want to be able to write something like the code below, but it doesn't work.

{{#each category in category_options}}
  <button {{action "filterCategory" category}} {{bind-attr class=":btn-small isFiltered(category):btn-active:btn-inactive"}}>{{category}}</button>
{{/each}}

在此示例中，isFiltered是一个计算属性控制器，并且查看查询参数以确定指定的类别是否已被应用为过滤器。

In this example, isFiltered is a computed property on the controller, and it looks at the query parameters to determine whether the specified category has been applied as a filter.

从我完成的阅读中，听起来像你可以不能将参数传递给计算属性。我遇到了提到帮助者，绑定帮助者和组件的答案，但是我无法弄清楚我需要哪一个，或者我在这种情况下应用它。

From the reading I've done, it sounds like you can't pass parameters to computed properties. I've come across answers mentioning helpers, bound helpers, and components, but I haven't been able to sort out which one I need, or how I would apply it in this situation.

编辑：
为了澄清这个例子，想像我有一系列的按钮可以过滤各种标签：

To clarify the example, imagine I have a series of buttons that filter on various tags:

Filter for: <Cats> <Dogs> <Rabbits> ... # imagine an arbitrary number of these. dozens, maybe

当用户点击Cats时，它触发了filterCategory，它设置了model.category查询参数到['猫']。如果他点击Dogs，model.category将成为['Cats'，'Dogs']

When a user clicks Cats, it triggers filterCategory, which sets the model.category query parameter to ['Cats']. If he then clicks Dogs, model.category becomes ['Cats','Dogs']

根据后一种情况，我希望猫和狗按钮拥有类btn-active。

Following the latter case, I want the Cats and Dogs buttons to have the class btn-active.

我想定义isFiltered像这样：

I would like to define isFiltered like so:

isFiltered: function(buttonname) {
  if (this.get('model.categories').containsObject(buttonname)) { # pseudocode
    return true;
  }
  else { return false; }
}

将按钮名传递到该功能可以轻松地对每个按钮进行比较并确定它是否在过滤器中。

Passing buttonname into the function makes it easy to do the comparison for every button and determine if it's in the filter.

如果这种整体方法是错误的方式来处理事情，那么正确的方法是什么？

If this overall approach is the wrong way to go about things, what's the right way to do it?

推荐答案

1）作为组件，您可以执行以下操作：

1)As component you can do something like below:

>

in template

{{#each category in category_options}}
  {{category-button category=category selectedCategoies=selectedCategories action="filterCategory"}}
{{/each}}

组件模板

{{category}}

组件

export default Ember.Component.extend({

  tagName: 'button',
  classNames: 'btn-small',
  classNameBindings: 'isFiltered:btn-active:btn-inactive',

  isFiltered: Ember.computed('category', 'selectedCategories', function(){
    return this.get('selectedCategories').contains(this.get('category'));
  }),
  click: function(){
    this.sendAction('action', this.get('category'));
  }
})

2）或者你可以把你的类别作为数组像这样的对象

2)Or you can make your categories as array of objects like so

[
  {name: 'category1', isActive: false},
  {name: 'category2', isActive: true},
  ...
]

然后根据需要更改 isActive 标志。

And then change isActive flag as you need.

在控制器中：

categoryObjects: Ember.computed('category_options', function(){
  return this.get('category_options').map(function(category){
    Ember.Object.create({name: category, isActive: false});
  })
}),
actions: {
  filterCategory: function(category){
    category.toggleProperty('isActive');
    return
  }
}

在模板中： p>

And in template:

{{#each category in categoryObjects}}
  <button {{action "filterCategory" category}} {{bind-attr class=":btn-small category.isActive:btn-active:btn-inactive"}}>{{category.name}}</button>
{{/each}}

这篇关于如何动态地将类应用到ember-cli中的对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！