Passing an object to a component

1

Hi everyone,

I’m using Ember 2.0

I’m trying to use the Kendo-UI grid with Ember and my first thought was to wrap it as component. Now what I’m not sure how I should do is how to pass some of the options to the grid. For example, the kendo-ui grid receives a set of parameters as JSON (example bellow):

didInsertElement: function() {
this.$().kendoGrid({
    height: 550,
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
 .... //more code

Now, this works all well. But I wanted to make my component configurable and receive a set of parameters, which is easy to do for simple properties like sortable or groupable

{{kui-grid groupable=true sortable=false}}

The thing Is, how would I pass the “pageable” object to the component? It’s a JSON object with 3 keys. I’m not sure how to do that. If I had controllers (which I’m trying to avoid since I’m using Ember 2.0) I imagine that I could have those values in each controller and then do something like:

{{kui-grid pageable=controllerProperty}}

Is there a better way of doing this? Also, there’s another thing: While the pageable option is a set of static options. The grid for instance also receives the column definition (which can have any number of columns) , like this:

kendoGrid({columns: [ { title: "First Name", field: "firstName" },
           { title: "Last Name", field: "lastName"}
           { title: "Email", field: "email" } ] )}

So the solution would have to something that works with this scenario.

I’ve worked with a component based framework once and the way we handled this was having child components of the parent and the parent could read those values from the children, like the following:

<dataGrid dataSource='source'>
  <column name='name' label='Name' width='50' />
  <column name='age' label='Age' width='50' />

However, I don’t know how to to that using Ember, I’ve searched around “parent-child component communication” but but with no luck regarding this issue. Help would be very much appreciated, thanks!

2

You could pass the entire options object to the component. One downside, depending on how you look at it, is that the component is configured from within the containing context–either the route or the controller. But I think that makes the component itself more reusable.

{{kui-grid options=model.gridOptions}} or {{kui-grid options=gridOptions}}

didInsertElement: function() { this.$().kendoGrid( this.get(“options”) ); }

1 Like
3

Hey @brian_ally

I was kind of hoping there would be some solution that didn’t involve the controller/route, but then again… the route does provide data for the template/components, and this particular component is all about showing data so I might have to concede that your suggestion of the route might be the most appropriate place to configure the component.

Thanks for taking the time to help me out. Really appreciate it.

4

The way I look at it, the route sets up the context, and components should be as reusable as we can make them. So, passing the options in from the route seems like the best approach. But I’m still fairly new with Ember so don’t take mine as the last word, by any means.