I am building a visualization app using d3 and ember.
Inside the template i have declared a view like this
{{view 'myview'}}
where i have defined function to render the charts.
I want to trigger these functions on data change in the controller using observes property.
I know that all the views have the same context of the controller they are in.
I try this.controller.get('some_variable');
The output is undefined.
How to achieve it ???
you need to use get to grab the controller, this.get('controller.some_variable')
Related
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
I have an existing DetailController and DetailView in my app that has some pretty complicated UI / data manipulation logic (hotkeys, copy paste, duplication, autocomplete, etc) -- the view sends UI events to the controller; the controller handles the logic.
I want to convert this to an Ember component.
Does this basically mean I merge the view and controller into DetailComponent? This seems messy and wrong to me.
If not, how do I use controllers and views internally within a component? That is, I still want the complete isolation and well-defined public interface of the component, but internally within the component, I'd like to use controllers and views for organization. Is that possible?
Is it possible to use {{render}}, {{view}}, {{partial}} within the component template?
Does this basically mean I merge the view and controller into DetailComponent? This seems messy and wrong to me.
Yes that is what it means.
internally within the component, I'd like to use controllers and views for organization. Is that possible?
So component basically replaces a single view/controller pair. Beyond that a component is just an extension of Ember.View and can be organized just like any other view.
Is it possible to use {{render}}, {{view}}, {{partial}} within the component template?
Yes. Any of those helpers will work.
Is there any way in Ember to update the Handlebars template content and re-render the dependent views dynamically?
I tried by using Ember.TEMPLATES and Ember.Handlebars.compile method, but it didn't worked and the JSFiddle is available here, so any suggestions?
I don't know why you're attempting to do this, but if it's just for testing sake, here is a working fiddle http://jsfiddle.net/VTP4n/2/.
Ember caches the template inside the view as a computed property, so I'm overriding it and calling rerender on the view. I wouldn't even consider using this in production though.
Up until recently, it was as easy as overriding the template and then calling view.notifyPropertyChange('template'), but with the new container stuff, it's a lot more complex to do it cleanly.
Capture anything you want the user to manipulate in the template as a property of the view/controller and create a binding for it either as computed property or attach an observer to it. This way you can create a view dynamically and append it anywhere you want in your document.
The doc's example implies that the context is the instance of a View without a controller. But I can't try this out with latest version, please check this jsfiddle's link.
Here is the way I would do this: http://jsfiddle.net/arasbm/ACqjt/1/
Just to clarify context of the view is set to it's controller by default. If you want to access a property of view such as flag inside the view template you would use view.flag to refer to it.
I prefer to setup view class name bindings inside the view itself:
classNameBindings: ['flag:A:B']
You should also be able to do the binding in the template, but I am not sure why that is not working in your fiddle. Do not use quotations when you are defining your view, instead use:
{{view App.CustomDiv}}
or
{{#view App.CustomDiv}}{{/view}}
if you dont want to use a seperate template for your view. I like to setup a template for each view I have. I put them in separate files for example custom.handlebars, but for demonstration in jsFiddle you can use the data-template-name property to name the template you want to use, and then refer to it inside the view definition using templateName. I hope this helps you move forward.
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.