SnapScroller or Panels?

Hi there,

I am rewriting an Enyo 1 app which makes intense use of SnapScrollers (actually a subkind of SnapScroller which additionally shows indicators for each "page").

As there is no SnapScroller in Enyo 2 I wonder if that is for some other reason than "not implemented yet"? Should I use (extend) ryanwatkins SnapScroller or maybe use Panels with LeftRightArranger? Any suggestions especially regarding performance?

The content is inside an enyo.Collection so I guess a Panels solution would be somehow complicated.

Any hints are greatly appreciated :)

Comments

  • Check out the gallery for some snapscroller alternatives, I think.
  • I wrote SnapScroller before Panels existed in Enyo 2. I would recommend using Panels unless you need the 'overscroll' at the ends of SnapScroller - the ability to drag past the first or last item and have it stretch and snap back.
  • I did not realize there are more than just Ryans SnapScroller, I'll have a look at the others.

    Ok, overscrolling is not needed and maybe scrolling is more or less by accident the transition we've chosen. Panels would be definitely the more universal approach.

    Thanks, I'll experiment a bit with Panels and Collections.
  • Ah, forget about complicated. You can use "containerOptions" if you want a special container for your DataRepeater, it is not documented though.

    My current solution (seems to work well):
    enyo.kind({
    	name: 'myDataPanelView',
    
    	published: {
    		collection: null
    	},
    
    	components: [
    		{
    			name: 'repeater',
    			kind: 'DataRepeater',
    			containerOptions: {
    				kind: 'Panels',
    				arrangerKind: 'LeftRightArranger',
    				margin: 0,
    				classes: 'enyo-fit'
    			},
    			components: [
    				{
    					components: [
    						{name: 'test'}
    					],
    					bindings: [
    						{from: '.model.test', to: '.$.test.content'}
    					]
    				}
    			]
    		}
    	],
    
    	bindings: [
    		{
    			from: '.collection',
    			to: '.$.repeater.collection'
    		}
    	],
    
    	create: function() {
    		this.inherited(arguments);
    
    		this.set('collection', new myCollection());
    		this.collection.fetch();
    	}
    });
  • Now there's one cool undocumented feature! This definitely should go into the docs as soon as possible...
Sign In or Register to comment.