CODEWITHSUNDEEP
ember.js
Rajat
Rajat

Reputation: 34128

Manipulate itemView through CollectionView

Fiddle:

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

Essentially, I want to hide the current 'visible' item and make the next one 'visible' but toggleProperty doesn't seem to be working on the childView object. It just silently fails and throws no errors as well.

Upvotes: 0

Views: 805

Answers (2)

buuda
buuda

Reputation: 1427

A CollectionView will show all items in the collection, which is not what you want. I would implement a standard view that houses the collection and displays the next button and a slide view within it that displays the selected slide when the container view sets the selected slide as content on the slide view.

Upvotes: 2

sly7_7
sly7_7

Reputation: 12011

A quite ugly solution, almost working. I kept the way of switching views.

The template is the same, the js looks like this:

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

the fiddle:

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

Upvotes: 0

Related Questions