0

I am trying to get Ember.Select to work and am almost there. I have put up an example: http://exmer.com/selecttest/pages

To see my problem click on some Recent Pages and click edit. The select is not fetching the model via contentBinding="controllers.modelnames". If you click to modelnames route and edit some Recent Pages again it works correct because now we fetched the modelnames. I can perhaps fetch the modelnames from the page controller myself but this seems to me more like a hack.

The source is on https://github.com/broerse/ember-select-test (it runs without CouchDB)

So my question is: What is the correct way to use Ember.Select with Ember-CLI

Kingpin2k
  • 47,277
  • 10
  • 78
  • 96
Martin Broerse
  • 85
  • 10

2 Answers2

4

Understanding the ember workflow is really important here. When you navigate to a URL Ember parses the URL and maps it to your router. At that point Ember knows it needs to fetch the models from each resource/route that are part of the URL. Once it's fetched all of those models it decorates them with the associated controllers. This right here describes where your issue is. Just using a controller doesn't cause a model to be fetched. You're using needs on a controller which isn't a parent/ancestor in your router, so you aren't guaranteed it will be populated. You'll need to manually fetch the model and store it on the other controller, or fetch the model and store it on the current controller in order to make sure it exists when you visit that route.

Kingpin2k
  • 47,277
  • 10
  • 78
  • 96
  • Yes thanks. That is what I think is a hack. The `{{mname.content.name}}` on https://github.com/broerse/ember-select-test/blob/master/app/templates/page.hbs works but the select is not. That is not logical. – Martin Broerse Oct 11 '14 at 18:36
  • It's more of you're expectation of needs is incorrect, so you're having to hack it to get it to work how you want. The thing you're showing me completely different, an async relationship on ember-data vs needs on an ember controller. Ember and Ember-Data are two different products. Additionally you shouldn't be accessing the content property, it should just be `{{mname.name}}` – Kingpin2k Oct 11 '14 at 18:48
  • Just tested {{mname.name}} and you are correct. Ember-Data is a basic part of Ember-CLI so perhaps my question is more clear as "What is the correct way to use Ember.Select with Ember-Data". In your answer you suggest 2 ways. What is the correct way? – Martin Broerse Oct 11 '14 at 19:10
  • Ember-data is not a basic part, nor a necessary part of ember-cli. That being said, if you want to use it, you would need to create a computed property either on the pages controller returning the items you want, or manually hook up the controller. I'd look into this thread: http://stackoverflow.com/questions/20521967/emberjs-how-to-load-multiple-models-on-the-same-route/20523407#20523407 – Kingpin2k Oct 11 '14 at 19:56
  • What I mean is that out of the box my version of Ember-CLI includes Ember-Data as basic part as I run `ember new`. I know you can remove it. I keep thinking 'select' should just work without hacks. I also think 'select' is a basic html part ;-) Thank for your help and this link. It seems the end conclusion is: there is no correct way yet. Lets hope 'select' will work hackless in the future for beginners like me. – Martin Broerse Oct 11 '14 at 20:46
  • 2
    I wouldn't agree that is a valid conclusion. Select works perfectly fine if you provide it a collection. You having difficulties obtaining a collection doesn't mean select doesn't work. I imagine you'd have problems with a ton of other things if you have issues obtaining data. – Kingpin2k Oct 11 '14 at 22:04
  • I fixed https://github.com/broerse/ember-select-test/blob/master/app/controllers/page.js but the pages array is never filled. It seems not to be a ember-pouch thing. Do you see my error? http://martinic.iriscouch.com:5984/_utils/document.html?selecttest/modelname_2_47C912D5-26C9-89DD-81E2-FC78D8A43A29 – Martin Broerse Dec 10 '14 at 13:31
  • https://github.com/emberjs/data/issues/2068 seems to be my problem. If it is by design this is a problem because a custom serializer for each model is not universal. – Martin Broerse Dec 12 '14 at 13:10
0

Ember select works the same everywhere (ember cli or not), no matter if it's ember data or some other library or just pojos.

hbs {{view 'select' content=model optionValuePath='content.id' optionLabelPath='content.name' selection=selectedModel}}

That would mean your model has an id attribute and a name attribute. The model would be populated from the route, if it's a secondary model, you can use this.modelFor in the route and set it to a different attribute on the controller in setupController on the route.

The issues with Ember select is performance and that it's not a component.

knownasilya
  • 5,998
  • 4
  • 36
  • 59
  • So the correct way is to not use Binding as in https://github.com/broerse/ember-select-test/blob/master/app/templates/page-edit.hbs but it is not working. Well I can't get it to work but this is probably as @Kingpin2k said because I have issues obtaining data ;-) If somebody has the time please take a look and perhaps submit a patch to github. – Martin Broerse Oct 14 '14 at 06:33
  • There are more issues with Ember select than just performance and it not being a component. There is discussion about rewriting it because it's filled with problems. Ember select becomes particularly tricky with Ember Data and loading it asynchronously, because Ember select is not promise aware. Here are a couple of thread that discuss these issues: https://github.com/emberjs/ember.js/issues/5259 and https://github.com/emberjs/data/issues/1405. – Johnny Oshika Oct 22 '14 at 23:09