I have template wich displays a model. In this template, I can see the model properties, even the child/parents ones.
I want to create a component to display the parent, but in the component I only got a 'promise'.
template:
...
{{expedient-header expedient=model.expedient}}
....
I pass the model.expedient (expedient has many documents, and document belongsTo expedient, in this case, model = document.
In the same template where I call the component, the model.expedient is a fetched record, but when I pass it to the component, it's only a Promise.
If I pass the model, I get the model, but I want to make this component more independent, and just pass the model.expedient.
Is this possible/supported?
As I'm just a 'newbie' with ember, I'm just playing, I could maybe refactor how I'm doing things but I would like to know if this is possible ...
:-)
thanks!
On init component you can work with promise, and after that render data.
Because component is it "controller" for view.
Related
I want to pass a dynamic variable which is achieved from beforeModel of a route js to corresponding template's handlebar. I know that model data can be passed through model hook. However this is not model data. Also, there is no controller involved since i don't think pass variable from route to controller then template shouldn't be the easiest way.
thanks.
From ember guides beforeModel hook is appropriate for cases,
1) A decision can be made to redirect elsewhere without needing to resolve the model first.
2) Any async operations need to occur first before the model is attempted to be resolved.
so in your case, I will encourage you to do that stuff in setupController hook. if you still want to pass data from beforeModel to template then suggested solution would be, set result in route and get those values and set it in controller through setupController hook. Note: You will get default controller for every route.
This is some route data that you need in your template, that sounds like model data to me!
Also, there is always a controller involved, as one is created by the framework to be the context of the template. What this means is that the model() hook actually sets the model property of the controller, and any {{property}} you look up in your template is looked up in the related controller.
Pass the data along with the rest of the data in the model() hook.
I understand how to send parameters along with an action to a component:
http://emberjs.com/guides/components/sending-actions-from-components-to-your-application/
Is there a way to send parameters to a component's property?
Example: In a template, I'm rendering a component inside an each loop. The loop is iterating through the various instances of the model of the array controller. I would like to pass the individual instance of the model of the array controller to a property of the component. The property is a function that will create a chart base on the value of the passed instance of the model. The chart needs to be created in JavaScript. Any way to achieve this?
If I understand what you are asking - this is actually very easy to accomplish:
http://emberjs.com/guides/components/passing-properties-to-a-component/
So, something like the following:
{{ your-component propertyInComponent=modelInstance }}
Then, in your propertyInComponent which is defined in your component's js file is yours to do whatever you want with it.
I would pass in the model as a regular property and then call the chart creating function on the didInsertElement event.
http://emberjs.com/api/classes/Ember.Component.html#event_didInsertElement
From my main handlebars dashboard template I am rendering multiple templates in a loop, setting the model as following
{{#each forecastDispatch in forecastDispatches}}
{{render "balance.forecastDispatch" forecastDispatch}}
{{/each}}
The dashboard combines multiple models and renders them on the same page/route.
From logging to the console, I can see that the BalanceForecastDispatchController controller gets instantiated correctly for each render call and the forecastDispatch model of type DispatchType is set as content, but not as model, model is still undefined. As the model is not populated properly, passing data to lower level components does not work. I thought that the model is just an alias/proxy for content, hence I am quite surprised.
What am I missing here? Any help is really appreciated, I am trying to solve this for quite some time now, but cannot find the culprit.
The issue was caused by snippets in my Handlebars template which were not commented out properly. As a result, one extra instance of the BalanceForecastDispatchController was created by Ember. This controller had off course no model/content assigned to it. In the Chrome Ember-inspector the controller was shown without a model.
I am working on my first significant Ember.js app, and have been running into some roadblocks. After hitting one-too-many show-stopping bugs with ember-data, I have decided to roll my own models using Ember.Object (for now at least - ember-data looks like it will be real awesome, real soon).
My basic model structure is:
Album (has photo album-specific attrs, and references a collection of images)
Images (an ArrayProxy collection of Image models, which tracks collection-level attrs like 'currentImage', and 'nextImage')
Image
I have a {{#linkTo}} helper in my template that is supposed to allow the user to click to the next image in the set, like so:
<button>
{{#linkTo image controllers.images.nextImage}}
Next Image
{{/linkTo}}
</button>
This template has the context of the AlbumController, which needs: ["images"]. controllers.images.nextImage is a computed property, that figures out ID of the currently-displayed image, then uses it to find the Image model for the next model in the Images ArrayProxy collection.
My problem is this:
Upon page load, I receive an error message Uncaught Error: assertion failed: Cannot call get with 'id' on an undefined object.
I'm assuming this is because the {{#linkTo}} helper is trying to get the id property from the return of controllers.image.nextImage, which is a computed property that relies on the Images collection being loaded from the server. This async behaviour is being handled with promises behind-the-scenes, but the {{#linkTo}} helper seems to required a valid context to be returned immediately upon page load.
My questions are these:
Has anybody else had to handle this kind of situation, where they're not using ember-data and had to use {{#linkTo}} helpers with computed properties that weren't immediately available?
Can anyone suggest workarounds that don't fight Ember's way of doing things?
Some of my thoughts are:
make the computed property return a dummy context, that somehow gets replaced with a valid model after load
use an {{#action}} helper instead of {{#linkTo}}
I have written up a JSBin example which is mostly code-complete, except I couldn't manipulate the hash URL to trigger the nested routes, so I had to do everything in the application template.
I'm trying to create a reusable component which consist of a textfield and under the textfield, i want to have a collectionView to display a filtered list of elements.
My problem is that I want itemViewClass of the containerView to be customized when creating the component. Currently, I pass a parameter listItemView to the container view and declare
itemViewClassBinding: 'parentView.listItemView' instead of having an hardcoded templates.
This leads me to a problem where Ember assert that itemViewClass must be an instance of Ember.View:
Uncaught Error: assertion failed: itemViewClass must be a subclass of
Ember.View, not function () {
Did anybody ran into a similar problem?
Thank you
Sub-classing your ContainerView class is one option. Here is an example: http://jsfiddle.net/ethan_selzer/kcjzw/240/
This pastie may be a little easier to read: http://pastie.org/4256407
Ethan
I have created this functionality very recently in my ember app. The way I did it was by binding to a controller property. When the user types in the textfield it needs to set the filter text as a controller property. Then your controller will have another property that observes the filter field text property and produces a filtered list of the content data based on the filter text. Then your filtered view would be bound to that filtered content of the controller instead of the usual (all) content. This way your two views don't need to know about each other and the controller provides the data.