2012-07-05 63 views

回答

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/

+0

你的小提琴不起作用。事實上,帶'a'的初始childView也沒有顯示出來。 – Rajat 2012-07-06 03:10:10

+0

@Rajat「它幾乎可行」。事實上,所有的視圖都是用isVisible = false初始化的。但是,如果您在佔位符消失時單擊,我認爲它很好。 – 2012-07-06 06:28:17

2

一個的CollectionView將顯示集合中的所有項目,這是不是你想。我將實現一個標準視圖,該視圖容納集合並顯示下一個按鈕和其中的幻燈片視圖,當容器視圖將選定幻燈片設置爲幻燈片視圖上的內容時,將顯示所選幻燈片。