2

tagNameがulのEmber.CollectionViewを使用して表示するアイテムのリストがあります。特定のclassNameをmouseOveredを取得するli内の要素に設定したいのですが、常に1つの要素のみがクラスを持つことができます。基本的にはすべての要素の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

マウスが出入りするときにブール値を切り替えることで、classNameBindingsを使用できます...

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
    }
  })
});

お役に立てれば...

クリック時にアイテムを強調表示するための更新

この方法は、リスト内のアイテムをクリックしてルーティングすることを計画していて、繰り返してブールフラグをクリアする必要がない場合に特に便利です...

//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

ルーティングを使用していない場合は、Arasが言ったことを使用できます

于 2012-11-17T08:37:22.373 に答える
2

選択したアイテムを保持する1つの方法は、Animalモデルにselectionプロパティを追加することです。次に、コントローラーにメソッドを追加して、リストを繰り返し処理し、animalsそれらをすべてfalseにリセットできます。

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

マウスを入力すると、最初にそのメソッドを呼び出して、強調表示されているすべてのプロパティをにリセットし、次に現在のビューfalseのプロパティをに設定します。最も効率的ではありませんが、Unspecificedが上記で提供するものに加えて、これは比較的簡単に実装できると思います。highlightedtrue

于 2012-11-18T07:23:22.487 に答える