emberjs/list-view

An incremental rendering list view for Ember.js

ListView is unmaintained and deprecated. The last published version was compatable with Ember <= 1.12.x. It is important to note that ListView is not compaitable with the Glimmer rendering engine. Ember Collection is ment to replace ListView as the ember solution to rendering large lists. If you need this functionality for your >= 1.13.x ember app, please checkout Ember Collection.

list-view's Issues

Same version as you demoed at the March Ember Meetup?

@ebryn is this the same version as you demoed at the March Ember Meetup? It seems like the most recent commit doesn't reuse the DOM elements.

I remember in your presentation, that we could see the DOM elements' top value change live in Developer Tools. When I run the demo, the DOM elements are removed and then readded.

I guess it's this line that makes the child views rerender:

set(childView, 'context', content.objectAt(contentIndex));

Maybe you haven't pushed the version you demoed to GitHub yet?

Thanks,
Sebastian

Rendering tables does not work

Hi,

I tried using your ListView to render a large table, however the results seem to be bad. you can see the problem here with ease:

EDIT: Removed setInterval:
http://jsbin.com/egowik/7/edit

It would be great if this worked. Thanks!

Example with ember-data

Is it possible to write an example of list-view using ember-data to load model ?

better itemController support.

test non listItemView childViews cohabiting with listItemView's

No installation instructions. Should use RVM.

Hoping to get this compiled but having trouble getting the right version of ruby,gem,bundler etc... Could we add a .rvm and a little set of instructions?

Slow rendering/scrolling in IE9

I'm seeing some severely slowed scrolling in IE9. Looks like the problem might be slow performance rendering items that are coming into view. Here's a jsbin with about 3000 rows. Scrolling is great in Chrome, sucks in IE9. http://jsbin.com/odehas/8/edit

Has anyone else run into this? Thoughts?

arrayDidChange implementation may cause un-needed re-render cascades.

Row height required?

I remember hearing some talk of removing the requirement of a static row height. I have a circumstance where we have variable height list items laid out in a grid. The height will change at runtime based on user preferences. The good news is that all items will always be the same height. Will the changing the height of our list items cause any weird issues with list-view?

Update demo page with latest version of ember

It would be great if the demo page was running the latest version of ember

No installation instructions

It's not clear how to install list-view... I ended up copying the list-view.js from the demo.

itemController does not fully work with listView

Context inside the handlebars for 'this' is not itemController

itemController is not available in the itemViewClass of the handlebars for listView. While it is an object proxy and the properties are successfully proxied, the methods and actions are not.

Rerendering of child views of ListItemView

When your listItemView has a view in its template, that view is keeps being recreated as you scroll. I was wondering if there is a way for just the context/content reference to update for that view without rerendering.

The behavior is illustrated here: http://jsbin.com/ebUjAkEW/3/

The elementId for innerView shouldn't keep growing, just like the outer id.

Bizarre scrolling behavior

http://screencast.com/t/lC7Pmn8kr
This is me steadily scrolling downward.
Using: Last commit: 37baf55 (2014-02-10 20:49:20 -0500)
Happens in all browsers locally on OSX, as well as in a windows VM.
Here's my template.

{{input value=query}}
<ul>
    {{#collection Ember.ListView content=queryResults height=500 rowHeight=20 width=500}}
        <li>{{!#link-to 'instrument.details' instrument}}{{insaddr}}{{!/link-to}}</li>
    {{/collection}}
</ul>

I'll try to put together a full reduced test case for you in the next day or two, but does anything jump out at you in the meantime?

Add configurable delay before setting a ListViewItem's context

I'm trying to use list-view in combination with a lazily loaded array of Ember Data models. Currently, scrolling through the list causes an immediate network request for every single record. This could be mitigated by delaying the setting of the list-view-item's context with a configurable timer.

Ideally, list-view could expose two hooks: contentScrolledIn(contentIndex) and contentScrolledOut(contentIndex) so that the consumer can build their own array proxy that handles the delay.

Related to #4.

Example usage:

DelayedListView = Ember.ListView.extend({
  contentScrolledIn: function(contentIndex) {
    var content = get(this, 'content');
    content.loadLater(contentIndex);
  },
  contentScrolledOut: function(contentIndex) {
    var content = get(this, 'content');
    content.cancelLoad(contentIndex);
  }
});

where content is a custom array proxy.

/cc @huafu @jrabary @stefanpenner

Unable to build project

I am unable to rake the project. bundle completes successfully, but when I try to run bundle exec rake dist I get the following error:

mts-macbook-pro:list-view mt$ bundle exec rake dist --trace
rake aborted!
/Users/mt/.bundler/ruby/1.8/ember-dev-31e82147b572/lib/tasks/uploads.rake:5: undefined (?...) sequence: /(?<name>.+)\t(?<url>.+) \((?<type>.+)\)$/
/Users/mt/.bundler/ruby/1.8/ember-dev-31e82147b572/lib/ember-dev/tasks.rb:3:in `load'
/Users/mt/.bundler/ruby/1.8/ember-dev-31e82147b572/lib/ember-dev/tasks.rb:3
/Users/mt/.bundler/ruby/1.8/ember-dev-31e82147b572/lib/ember-dev/tasks.rb:3:in `each'
/Users/mt/.bundler/ruby/1.8/ember-dev-31e82147b572/lib/ember-dev/tasks.rb:3
/Users/mt/x6/ember-list-view/list-view/Rakefile:2:in `require'
/Users/mt/x6/ember-list-view/list-view/Rakefile:2
/Library/Ruby/Gems/1.8/gems/rake-10.0.4/lib/rake/rake_module.rb:25:in `load'
/Library/Ruby/Gems/1.8/gems/rake-10.0.4/lib/rake/rake_module.rb:25:in `load_rakefile'
/Library/Ruby/Gems/1.8/gems/rake-10.0.4/lib/rake/application.rb:589:in `raw_load_rakefile'
/Library/Ruby/Gems/1.8/gems/rake-10.0.4/lib/rake/application.rb:89:in `load_rakefile'
/Library/Ruby/Gems/1.8/gems/rake-10.0.4/lib/rake/application.rb:160:in `standard_exception_handling'
/Library/Ruby/Gems/1.8/gems/rake-10.0.4/lib/rake/application.rb:88:in `load_rakefile'
/Library/Ruby/Gems/1.8/gems/rake-10.0.4/lib/rake/application.rb:72:in `run'
/Library/Ruby/Gems/1.8/gems/rake-10.0.4/lib/rake/application.rb:160:in `standard_exception_handling'
/Library/Ruby/Gems/1.8/gems/rake-10.0.4/lib/rake/application.rb:70:in `run'
/Library/Ruby/Gems/1.8/gems/rake-10.0.4/bin/rake:33
/usr/bin/rake:19:in `load'
/usr/bin/rake:19

Am I missing some dependency?

mts-macbook-pro:list-view mt$ bundle -v
Bundler version 1.3.5

mts-macbook-pro:list-view mt$ ruby -v
ruby 1.8.7 (2012-02-08 patchlevel 358) [universal-darwin12.0]

Ember RC8 breaks Ember.ListView

If you transition away from a route with a list-view you'll receive
Cannot call method 'destroy' of undefined

This should be easy to replicate, but let me know if you need a jsbin.

I cannot replicate the exact issue with VirtualListView but there are some slight rendering issues with large datasets but that is a separate issue.

//Line 2014210 -> cannot call method 'destroy' of undefined:
// remove from non-virtual parent view if viewName was specified
if (viewName && nonVirtualParentView) {
    nonVirtualParentView.set(viewName, null);
}

childLen = childViews.length;
for (i=childLen-1; i>=0; i--) {
    childViews[i].destroy(); // where the exceptions are thrown
}

Is an unordered list (ul > li) container structure possible?

I'd like to have a structure like

  <ul class="nav nav-tabs nav-stacked">
    <li></li>
     ..
</ul>

for the list view since I am using bootstrap nav components.

I've put together a jsbin to list progress so far: http://jsbin.com/axodim/4/edit but it's not working after scrolling and the initial state has more li's than necessary.

The main issues I am having are:

• I can't figure out how to override this div tag in the ListView render.
• How to add a linkTo tag inside of the collection that is also the ListItemView container. I'm not sure if the ListItemView can be a link with nested content.

Support for itemController

App.PersonController.extend({ });

App.PeopleController.extend({
  itemController: 'person'
})

peopleController.objecAt(1); returns person instance.
we should likely use:
peopleController.objectAtContent(1); returns personController instance.

Chrome on iOS not caching images

Based on the demo http://4euq.localtunnel.com/demos/virtual.html

When a cell re-enters into view, I suspect the images are re-downloaded. I can't say for sure without hooking up an inspection proxy like Charles, but visually, I can see the images progressively download plus the activity spinner in the menubar appears.

Scroll momentum broken on WebKit

Here is a JS Bin demonstrating the issue in Webkit browsers (tested on Chrome 30 and Safari 7).

1. Put the mouse cursor over an item of the list (see the hover effet)
2. Scroll the list quickly and repeatedly using an input method that trigger inertial scrolling (like a trackpad)
3. Half of the time, instead of decelerating slowly, the scrolling stops, and the whole page bounces instead

The issue doesn't appear if the cursor is over a section of the list without text (for instance the right side of the sample), or if the scroll is slow.

Refs #48

AWS Key is invalid, so passing tests no longer publish

• publish after green builds
• add links to builds in readme.

(cc @fivetanley)

Leaking Ember._renderBuffer instances

I ran a couple profile snapshots against the example list view in this repository; it looks like it's leaking instances of Ember._renderBuffer.

First snapshot: Initial Page Load

Second snapshot: After heavy scrolling of the list view on the right

You'll notice the Retained Object count jumped up significantly. Here's a search showing specifically Ember classes:

So it looks like Ember._RenderBuffer instances are sticking around. Chrome Renderer also went from ~200MB of Real Memory in Activity Monitor to ~500MB.

I'm using the list-view.js from dist/modules/. Any thoughts on this?

Changing height of listview during runtime

Is there support to adjust the list view height during runtime?

I apologize if this is documented somewhere, I cannot find it.

Support Tables

I would like to create a list view that represents a TBODY:

App.ListView = Ember.ListView.extend
  tagName: 'tbody'
  ...
  itemViewClass: Ember.ListItemView.extend
    tagName: 'tr'
    ...

However this is impossible due to the <div class="ember-list-container"> that is created.

What is the purpose of the container (rather than using the view element itself?). Alternatively maybe the main list view could be made virtual and allow the container's element to be customizable?

Drag is still captured when clicks are released off-screen

Based on the demo on http://4euq.localtunnel.com/demos/virtual.html, if you click, drag and release off-screen, the list-view continues scrolling.

ListView always shows vertical and horizontal scroll bars

In the documentation there is some required CSS given, specifically that .ember-list-view must have overflow:auto. However when the ListView is rendered it looks like it is always given an inline CSS style of overflow:scroll, causing both vertical and horizontal scrollbars to be shown for the element, even when there are not enough rows to fill the visible area.

I wouldn't particularly mind the vertical scrollbar from always being visible, but the horizontal scrollbar is pretty ugly and takes up precious real estate, not to mention in most use cases there will never be a need to scroll horizontally in the list. Is it acceptable to just override this inline style with a overflow: auto !important in my CSS, or will this cause issues with how ListView calculates what rows need to be rendered, ect?

Virtual listview does not work properly in IE 10 and other browsers

When we use Virtual list view - it works fine in google chrome browser but does not work properly in other browsers like Mozilla or IE 10 - Virtual list view items are not visible on scrolling.

Bower support

Have you guys thought about bower support for this? There's ember-list-view, but it's a shim by some guy which hasn't been updated in 4 months. Even just tagging versions occasionally would be a plus

Support for variable height

Hello!

Are there any plans to support elements of variable height? It seems like it shouldn't be impossible to do (render element while it is being added, fetch its height, hide again until needed?), so I was wondering if you are planning to add that at some point.

Cheers,
Eugen

Refactor ListViewMixin?

Any interest in pulling out some of the calculations within ListViewMixin into a separate class? CapyTheBeara@31780a6

license should be be prepended to files in dist

jquery-resize plugin

There exists a jquery plugin for detecting when an element changes its size. Currently one has to specify the dimensions of the list view in the template. Defining the dimensions in the css is more appropriate. That way using media queries and all the other fancy stuff is possible.

http://benalman.com/projects/jquery-resize-plugin/

update README... we support iOS w/ VirtualListView

Redundant contentBinding?

  {{#collection Ember.ListView height=500 rowHeight=50 width=500}}
    {{name}}
  {{/collection}}

Virtual List View drag and drop not working.

In Ember List View drag and drop working fine but in Ember Virtual List View drag and drop is not working why?

mousewheel issues on firefox

classNameBindings on Em.ListViewItems don't work after recycle

Here's a test case:

http://jsfiddle.net/SPZn4/2/

Don't do iOS Pull-to-Refresh on Android

It feels very bad to do "pull to refresh" on Android. A more correct UI is something like this:

Ideally we would support some kind of built-in approach that feels nice on Android, and we should probably have an abstraction that lets you control what appears on top and bottom in general.

/demos/mobile_images_small_reusable.html appears to be failing

Scroll-bar rendered behind content on Webkit

Because of the use of 3d transforms for positioning, the scroll-bar is being rendered behind the list's rows.

Related to #48.

Shown here http://jsfiddle.net/minusfive/6LUbw/

@kselden attempted to fix with c55ae13, but unfortunately that commit removed transform3d-based positioning which affects performance, and since it was the transform3d-based positioning which created the issue in the first place, it looked like the problem was fixed but in reality it wasn't (sorry @kselden :( ).

PR with fix coming soon

Scrolling momentum + scroll-bar layering broken on WebKit + Solution

Problem

On WebKit, when the mouse remains over the rows' contents as it scrolls, momentum is broken. Also, the scroll-bar is being rendered behind the list's content. Here's a fiddle which illustrates this behaviour:

• http://jsfiddle.net/minusfive/6LUbw/

As you can see, scrolling momentum is broken since the rows' contents extend their full width (.row-wrapper); and since the rows extend the full width of the container, the scroll-bar is being rendered behind the content (I made them semi-transparent so you can see the scroll-bar behind them).

When the rows' contents don't extend the full width of the row, scrolling momentum remains normal as long as your mouse remains over an empty area of the row, as illustrated in this next fiddle (try scrolling on the gray area, then on the blue area, and compare momentum):

• http://jsfiddle.net/minusfive/Tfgb9/

Solution

I've implemented a temporary solution on my app:

• Applying z-index: 1; to .ember-list-view fixes the scroll-bar layering issue.
• Momentarily applying position: relative; to .ember-list-scrolling-view while scrolling fixes the momentum problem, since it will be momentarily positioned on top of the rows, blocking mouse events on them.

Here are the same 2 fiddles, with the solutions applied (notice the scrollYChanged hook, and the _scrollingDidStart and _scrollingDidEnd methods under App.ListView, as well as the z-index: 1; on .ember-list-view in the CSS file:

• http://jsfiddle.net/minusfive/kJF8K/
• http://jsfiddle.net/minusfive/dtvVj/

Any suggestions on the most appropriate place to patch list-view.js directly to solve these problems? I'd be happy to patch and submit a pull request if you point me in the right direction.

Allow for height and width to be calculated at run-time.

At the moment, height is a required attribute (and width if the layout is column). That being said, many implementations might not know the height of their list before render (if it depends on the screen size).

In my app I'm setting the width and height to that of the parent node on didInsertElement if no width and height were already set. Does this make sense as a general case default?

If so, I can submit a PR.

work correctly with strange ratios.

List jumps when scrolling all the way down

I don't see this happening in the example, but the list view is jumping to the top when I scroll past the bottom.
Here's a screen capture: http://youtu.be/cf6zY8jl9z0

App.BulletinsIndexView = Ember.ListView.extend
  height: 500
  width: 650
  elementWidth: 640
  rowHeight: 10
  itemViewClass: Ember.ListItemView.extend({templateName: "row_item"})

Site presents Virtual list view without explanation

At http://emberjs.com/list-view/ there is a virtual list view, but no where does it say what the virtual list view is. Yeah the explanation's in the repo's readme, but why put the example there if it will lead to confusion?

performance regression tests

don't show join buttons when registration is over or game is over

Insert new item at beginning of listview instead of at the end

Before using list-view, I was using the next solution to insert items at the beginning of the array:

App.Entry = DS.Model.extend
  title: DS.attr('string')
  created_at: DS.attr('date')

App.EntriesController = Ember.ArrayController.extend
  sortProperties: ['created_at']
  sortAscending: false

But since I changed to list-view, it doesn't work anymore, this is the view with list-view

{{view App.EntryListView contentBinding="content"}}

Btw, before using list-view, I was using {{each}} to display the items

{{#each entry in controller}}
  <p>{{title}}</p>
{{/each}}

If does anyone have ideas to fix this I really appreciate :)

ListView doesn't work on ember-1.1.2

list item disappeared when scroll.