YUI with emberjs Datatable with ember dynamic link

Question

I recently discover YUI, and I wanted to use it with my ember app. I wanted to generate a dynamic link from ember but inside a datatable widget of YUI.

I want to add a new column name "detail" and put the link of every enquriry in it<

I have this so far :

    App.Enquiries.reopenClass({
    data: null,

   findAll: function() {
       var result = [];
       $.ajax({
           url: host + 'mdf/enquiry',
           type: 'GET',
           accepts: 'application/json',
           success: function(data) {
               data.enquiries.forEach(function(enquiry){
                   var model= App.Enquiries.create(enquiry);
                   result.addObject(model);
               });
               console.log('DEBUG: GET Enquiries OK');

               YUI().use("datatable", function (Y) {
                   var simple = new Y.DataTable({
                       columns: ["id", "type", "customerName"],
                       data: result,
                       summary: "Price sheet for inventory parts",
                       sortable: true
                   });
                   simple.render("#simple");
               });

           },
           error: function() {
               console.log('DEBUG: GET Enquiries Failed');
           }
       });
       tmp = result;
       return result;
       }
    });

Before, I was using ember like this to generate my data :

<script type="text/x-handlebars" data-template-name="enquiries">
    {{view App.NavbarView}}
    <div>
        <label>Number of enquiries : {{model.length}}</label>
    </div>

    <p>{{#link-to "enquiries.create" class="create-btn"}} Add Enquiry {{/link-to}}</p>

    <ul class="enquiries-listing">
        {{#each enquiry in model}}
        <li>
            {{#link-to 'enquiry' enquiry}}
                {{enquiry.id}} {{enquiry.type}} {{enquiry.customerName}}
            {{/link-to}}
        </li>
        {{/each}}
    </ul>
    {{outlet}}

    // YUI Datatable
    <div class="yui3-skin-sam">
        <div id="simple"></div>
        <div id="labels"></div>
    </div>
</script>

So as you can see I generated a link every enquiry with my each loop. But now since I'm generating with YUI, I have strictly no idea how I can do this..

Someone already used YUI with Ember before ?

Answer 1

@Pranava Sheoran : Yes I manage to find a work around like this :

Most likely what do you have to do is to catch the event from the view.

Here is my button in my YUI table :

{
    key: "id",
    label: "Detail",
    formatter: '<button class="view-btn" data-value="{value}">View</button>',
    allowHTML: true
}

With this line, it will generate button with a data-value equal the value you give in your data.

You catch the event like this in your view :

App.YourView = Ember.View.extend({
    didInsertElement: function() {
        var that = this;
        this.$().on('click', '.view-btn', function() {
            var id = $(this).attr('data-value');
            that.get('controller').send('myMethod', id);
        });
    }
});

Most likely the didInsertElement is called when your view was rendered. So you can use simple JQuery code in this part. And you send to your method whatever you want to send from the event (here my id) and you catch it with your controller and router like this :

App.MyController = Ember.ObjectController.extend({
    actions: {
        enquiryView: function(id) {
            this.transitionToRoute('enquiry', id);
        }
});

App.MyRoute = Ember.Route.extend({
    model: function(param) {
        // fetch your data with param = your id. (if you have setup your map like me like /mypage/:mypage_id)
    }
});

Hope this can help you !!