emberjs / list-view

An incremental rendering list view for Ember.js
MIT License
465 stars 116 forks source link

rendering via view helper #227

Closed xkb closed 7 years ago

xkb commented 9 years ago

Is today's release suppose to be functional? It's broken :cry:

I thought it was an issue with my code but then I ran the demo code and it doesn't produce any list items in the DOM.

{{#view 'list-view' items=model height=500 rowHeight=50 width=500}}
  {{name}}
{{/view}}

~~After some digging around: The inner property items isn't actually used anywhere(typo?) list-view-mixin references data via content. With that changed, inner views are created and you can see the scrollbar but there is no content in each view (no {{name}} ).~~

Which might be related to the following; in earlier versions if you were extending list-item-view data was accessible via a content prop but now it seems that's changed to context.content?

stefanpenner commented 9 years ago

the following is known to work:

{{#ember-list height=100  items=model.items width=100 rowHeight=20}}
  <div> hi </div>
{{/ember-list}}
stefanpenner commented 9 years ago

i think the docs are just out of date, only the helper form uses items=

stefanpenner commented 9 years ago

in-fact item just becomes content https://github.com/emberjs/list-view/blob/master/addon/helper.js#L20

xkb commented 9 years ago

Indeed that does work. That's when you're using the ember-list helper.

In the case of using the view helper what needs to be changed here?

{{#view 'list-view' content=model height=500 rowHeight=50}}
 <div> hi </div>
{{/view}}
stefanpenner commented 9 years ago

looks like you may answered your own question?

xkb commented 9 years ago

^ No that doesn't work. It creates list of list-item-view but each view is empty.

stefanpenner commented 9 years ago

^ No that doesn't work. It creates list of list-item-view but each view is empty.

ah, that was not clear from your comment.

xkb commented 9 years ago

Apologizes. If you have a vague idea of what might be causing this, I can spend some time on it!

stefanpenner commented 9 years ago

unfortunately I am unable to reproduce issues. Feel free to submit an example app showing your pain point, and i'll be able to look later this week.

xkb commented 9 years ago

I created an app showcasing my issue HERE. There also seems be to an issue with items disappearing when you scroll ( throwing morph.destroy is not a function )

Am I doing something wrong here?

taras commented 9 years ago

You need to upgrade your project to Ember 1.11.1. 1.11.0 has a regression that breaks ember-list-view. I submitted a PR to your example project.

xkb commented 9 years ago

@taras: Thank you! That fixes the second problem.

xkb commented 9 years ago

Back to the first issue.

Doesn't work:

 {{view 'list-view' content=model.content height=500 rowHeight=50 width=500}}

Works:

 {{view 'list-view' content=model.content itemViewClass=viewItem  height=500 rowHeight=50 width=500}}

Seems that the itemViewClass must be explicitly passed, is this expected?

davidsteinberger commented 9 years ago

I'm facing the same issue and haven't been able to fully figure that out myself:

By looking at the tests this may be intentional: No test within https://github.com/emberjs/list-view/tree/master/tests/dummy actually instantiates the list-view that way. They either use #collection or a subclass which provides an itemViewClass (via itemViewForIndex).

maulsea commented 9 years ago

FYI, @stefanpenner Your example did work for me.

{{#ember-list height=100  items=model.items width=100 rowHeight=20}}
  <div> hi </div>
{{/ember-list}}

Just had to remove .items from model.items. We need to map it directly to model as per model set in docs example.

cc: @KarimBaaba

davidsteinberger commented 9 years ago

@maulsea The issue is not #ember-list. That's known to work just fine. However the new Readme suggests view 'list-view' ... but then the items render blank. Does that work for you? Note: Using the #collection helper or providing a itemViewClass get the list-view working for me.

maulsea commented 9 years ago

@davidsteinberger You are right! That does not work. I can't even get it to work with itemViewClass.

taras commented 9 years ago

as @davidsteinberger suggested, using {{collection}} renders the list view. I believe reference to {{view}} helper in the documentation is incorrect. I submitted a PR to update the documentation and add an acceptance test to make sure that list view renders when using {{collection}} helper.

xkb commented 9 years ago

@taras: I was aware of this when I opened the issue, I didn't mention it because the collection helper is deprecate. According to the APIs the view helper should be used to render CollectionView instances as well. Which makes this a bug either with the helper or list-view.

taras commented 9 years ago

ember-list helper uses collection helper to render ListView https://github.com/emberjs/list-view/blob/master/addon/helper.js#L32. Until that changes, my guess is that it's safe to use the {{collection}} helper.

rwjblue commented 7 years ago

I'm sorry we didn't get back to this previously, but at this point this repo is essentially unmaintained. Please use @html-next/vertical-collection or ember-collection for similar functionality.

Closing...