How to output a button html in a controller?

#1

I’m using DataTables to make my tables more spiffy.

In my controller code, when a record is saved, I attach a whole new row to the table using it’s public facing API.

     // This is inside the controller code.
     // https://datatables.net/reference/api/row.add()

     MyEmberApp.UsersDataTable.row.add([
      user.get('id'),
      user.get('last_name'),
      user.get('first_name'),
      user.get('email'),
      (self.get('company')).get('name'),
      user.get('role'),
      '<button class="btn btn-default"><i class="fa fa-user"></i></button>',
      '<button class="btn btn-default"><i class="fa fa-pencil"></i></button>'
    ]).draw();

And this works fine and renders the button, except for the lacking action wired into it.

Heres what I use in my template:

{{#each}}
    <td><button class="btn btn-default" {{action 'createUserModal' this}}><i class="fa fa-pencil"></i></button></td>
{{/each}}

How can I generated a properly wired up button inside my controller?

#2

I think Em.Handlebars.compile is your method to go: http://emberjs.com/api/classes/Ember.Handlebars.html#method_compile just add your template as a string as paremeter to the function and you should have the proper output

#3

@gerrit Great, that makes sense to use that - although I’m not sure how to pass in the user record to the template.

Here’s what I’m trying:

Mars.UsersDataTable.row.add([
          user.get('id'),
          user.get('last_name'),
          user.get('first_name'),
          user.get('email'),
          (self.get('company')).get('name'),
          user.get('role'),
          '<button class="btn btn-default"><i class="fa fa-user"></i></button>',
          Ember.Handlebars.compile('<td><button class="btn btn-default" {{action "createEditUserModal" user}}><i class="fa fa-pencil"></i></button></td>')
        ]).draw();

Any suggestion on how to pass in the user object into this template?

#4

the content of a template usally is or should be a controller, but I dont know the exact context of your view. If you just add {{controller}} in that template, you can see what controller is in that scope and should have that content. As you are havin lots of row, I guess you are working with an itemController, or not?

#5

Yes, this code is run from my MyEmberApp.UsersIndexController = Ember.ArrayController.extend({}).

Run within the actions: object.

Like I said, the code run completely fine and adds the button, but the action itself is not wired up properly and I have no idea how to do that from within a controller.

This doesn’t work because it outputs the code as-is, and doesn’t actually wire up the action.

MyEmberApp.UsersDataTable.row.add([
          user.get('id'),
          user.get('last_name'),
          user.get('first_name'),
          user.get('email'),
          (self.get('company')).get('name'),
          user.get('role'),
          '<button class="btn btn-default"><i class="fa fa-user"></i></button>',
          '<td><button class="btn btn-default" {{action "createEditUserModal" user}}><i class="fa fa-pencil"></i></button></td>'
        ]).draw();
#6

can you compile the following instead of the button and write the output here? I am not sure in what scope you are with that table.

{{this}} - {{controller}}

If that doesnt give you the desired controller… try this:

{{parentView.controller}}

also you can add a a target to the action like

{{action "createEditUserModal" user target="view"}}
{{action "createEditUserModal" user target="controller"}}

I think the most important thing here is to find the scope… I am using compiled templates like that with ember table and it all works.