通过CollectionView操作itemView

时间:2012-07-05 14:04:34

标签: ember.js

小提琴:

http://jsfiddle.net/lifeinafolder/mpcRr/

基本上,我想要隐藏当前的“可见”项并使下一个'可见'但是toggleProperty似乎没有在childView对象上工作。它只是默默地失败并且也没有错误。

2 个答案:

答案 0 :(得分:2)

CollectionView将显示集合中的所有项目,这不是您想要的。我将实现一个包含集合的标准视图,并在其中显示下一个按钮和幻灯片视图,当容器视图将所选幻灯片设置为幻灯片视图上的内容时,该视图将显示所选幻灯片。

答案 1 :(得分:0)

一个非常难看的解决方案,几乎可以工作。我一直在改变观点。

模板是相同的,js看起来像这样:

App = Ember.Application.create();

App.slides = Ember.ArrayProxy.create({
    content:[]
});

App.slidesCollectionView = Ember.CollectionView.extend({
    contentBinding:"App.slides",
    tagName:'div',
    emptyView: Ember.View.extend({
        template: Ember.Handlebars.compile("<div class=\"placeholder\">placeholder</div>")
    }),
    itemViewClass:"App.slideView",
    classNames:["slideshow"],
    click:function(){
        var t = Ember.ArrayProxy.create({ content: this.get('childViews') });
        var selected = t.findProperty('isVisible', true);
        if(selected){
            var nextSlide = t.objectAt(selected.get('contentIndex') + 1);
            selected.set('isVisible', false);
            if(nextSlide){
                nextSlide.set('isVisible', true);
            }else{
                t.get('firstObject').set('isVisible', true);
            }
        }else{
            t.get('firstObject').set('isVisible', true);

        }            
    }
});

App.slideView = Ember.View.extend({
    templateName: 'slide-item',
    tagName:'div',
    isVisible: false,
    classNames:['slide'],
    classNameBindings:['isVisible:selected']
});

setTimeout(function(){
App.slides.pushObjects([
    Ember.Object.create({val:'a',index:0}),
    Ember.Object.create({val:'b',index:1}),
    Ember.Object.create({val:'c',index:2}),
    Ember.Object.create({val:'d',index:3}),
    Ember.Object.create({val:'e',index:4}),
    Ember.Object.create({val:'f',index:5})
])},2000);
小提琴:

http://jsfiddle.net/Sly7/dd6at/