2

我有一个使用Ember.CollectionView显示的项目列表，其 tagName 为ul。我想为 li 中的一个元素设置一个特定的className得到mouseOvered但在任何给定时间只有一个元素可以拥有该类，基本上在任何元素的 mouseOver 上我需要从所有元素中删除该类并将其添加到当前结束的具体一个。

App.AnimalsListView = Ember.CollectionView.extend({
  tagName: 'ul',
  contentBinding: 'parentView.controller.content',
  classNames: ['animals'],
  elementId: 'animalsList',
  itemViewClass: Ember.View.extend({
    highlightNameBinding: "",
    classNameBindings: ['animal', 'highlightName'],
    template: Ember.Handlebars.compile(
      '{{view.content.title}}'
    ),
    mouseEnter: function() {
      // need to remove highlighted class on all elements
      // this.set('highlightName', 'highlighted'); on current element
    },
    mouseLeave: function() {

    }
  })
});
4

2 回答 2

4

You could use className Bindings by toggling a boolean value when the mouse enters or leaves...

App.AnimalsListView = Ember.CollectionView.extend({
  tagName: 'ul',
  contentBinding: 'parentView.controller.content',
  classNames: ['animals'],
  elementId: 'animalsList',
  itemViewClass: Ember.View.extend({
    isHighlighted: false,
    //highlight-name is the CSS Class to be applied when isHighlighted = true
    classNameBindings: ['animal', 'isHighlighted:highlight-name'],
    template: Ember.Handlebars.compile(
      '{{view.content.title}}'
    ),
    mouseEnter: function() {
      //due to the following line, class will be applied when mouse enters
      this.set('isHighlighted', true);
      //this.toggleProperty('isHighlighted'); if using the latest ember
    },
    mouseLeave: function() {
      //remove the class by making the value false when mouse leaves
      this.set('isHighlighted', false);
      //this.toggleProperty('isHighlighted'); if using the latest ember
    }
  })
});

Hope this helps...

Update on highlighting an item on click

This method is particularly useful if you are planning on routing on clicking item in a list, and doesn't require clearing the boolean flag by iterating over...

//define a reusable component this way

App.ListView = Ember.CollectionView.extend({
    itemViewClass: Ember.View.extend({
        tagName: 'li',
        classNameBindings: ["isSelected:highlight-item"],
        isSelected: (->
            return this.get('content.id') === this.get('parentView.selected');
        ).property('parentView.selected')
    })
})

App.PostsController =  Ember.ArrayController.extend({
    content: [{
            name: "name1",
            id: 1,
            property1: "etc"
        },
        {
            name: "name2",
            id: 2,
            property1: "etc"                    
        }
        ]
})

//App.PostsView Handlebars
{{#collection App.ListView contentBinding="content" selectedBinding="controllers.postController.content.id"}}
    Name: {{view.content.name}}<br>
    Comments: {{view.content.property1}}
{{/collection}}
{{outlet}} //to connect App.PostView

//Now when an item is clicked you could send the context object or just the context id

If you are not using routing you could go with what said by Aras

于 2012-11-17T08:37:22.373 回答
2

保留所选项目的一种方法是向Animal模型添加 selection 属性。然后，您可以在控制器中添加一个方法来迭代您的列表animals并将它们全部重置为 false

clearHighlighted: function() { 
  animals.forEach(function(animal, index, self) {
    animal.set('highlighted', false);
  });
}

在鼠标输入时，您将首先调用该方法将所有突出显示的属性重置为false，然后将highlighted当前视图的属性设置为true。不是最有效的，但我认为除了上面未指定的内容之外，这将相对容易实现。

于 2012-11-18T07:23:22.487 回答