Im in the process of creating a view for a chart with jquery.flot. So I created a view and in my template call it like so:
{{view GraphView graphableBinding="graphables"}}
Problem is the graphables object is an array and the observers do not fire which notifies me of changes to the array within the view.
I thought about using a CollectionView, however, the array itself doesnt affect the html result of the template but rather needs to fire a $.plot() command on the container div with the new data array. Any thoughts on how I would implement this sort of thing?
You can use #each key lets you observe changes to the contents of the array. See the ember.js guide regarding this feature:
http://emberjs.com/guides/object-model/computed-properties-and-aggregate-data/
Related
We are creating a Sportsbook web app using Emberjs, where we retrieve data through an API and draw the view.
The received data is an object with many nested levels. Based on this object we have constructed the template file(.hbs) using each-in helper!
We are unable to use 'each' helper as we are receiving object, not array!
After the first retrieval, we are receiving updates every milliseconds and need to update the view as well by changing only the difference.
Sometimes we are receiving new entries in the object, and as the object itself is big, we need to add the new entry to the layout without redrawing the whole stuff.
Here is the problem: Each-in is not observable in this case, so it is not redrawing after pushing the new object.
Question: Is there a good way to implement this with Ember or is there a known helper that we can use instead of each-in, OR is there someone who can recommend me if we CAN create a new helper for this?
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
In the OfferRoute I have a container and a controller's method to add views dinamically to it:
addProduct: function() {
var container = Ember.View.views['containerView'];
var child = container.createChildView(Gmcontrolpanel.InsertProductView);
container.pushObject(child);
}
Everything works fine but if I go to another page on the application and then I come back to the offer page, the child views in the container are missing;
I can see that the HTML output is the empty container:
<div id="containerView" class="ember-view"></div>
Does someone know why is this happening?
Views redraws when you switch pages. So, you get a new containerView instance with empty children list every time.
I'm not recommending to use Em.View.views object for that task. If you need to store state of data between redrawing, it's more likely controller job, and containerView needs to bind to this controller.product list and display each product.
It's possible that {{#each}} helper or custom CollectionView is what will help you to solve the task more elegant.
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.
Both ArrayController and CollectionView have same functionality to render 'content' array using template, except that collection view have 'append..' methods to append in to anywhere in DOM. Am I right? Is there any other diff? Which one will be more useful?
An ArrayController is just an extension of Ember.ArrayProxy. It provides an interface to working with an array set as its contents. It handles dispatching array mutation notifications to any observers. It does not handle anything to do with the DOM, and is completely isolated from events or the view layer.
A CollectionView is a view (which means it manipulates the DOM and handles events) which takes an ArrayController (or anything that meets the expectations of an Ember.Array) and reflects its contents as Ember.Views. It listens to the mutation events put out by the ArrayController, and updates itself to match. It works by specifically listening to arrayDidChange messages. Without those messages coming from its content, it wouldn't know to create or destroy its views.
When you use the {{#each YourApp.yourArrayController}} helper, you're actually instantiating an Ember.CollectionView, that takes the controller as its content.
ArrayController is a Controller. CollectionView is a View. That's a pretty fundamental conceptual difference. In theory, ArrayController requires a View to render an array using a template. That's why the View has the append methods and the Controller does not.