YUI与emberjs可数据与ember动态链接 [英] YUI with emberjs Datatable with ember dynamic link

问题描述

我最近发现了YUI，我想用我的ember应用程序。我想从Ember生成动态链接，但是在YUI的数据化小部件之间。

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.

我想添加一个新的列名称detail，并将每个enquriry的链接在这个<

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

我有这个到目前为止：

    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;
       }
    });

之前，我使用这样的ember生成我的数据：

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>

所以你可以看到我每个循环都会产生一个链接。但是现在自从我用YUI生成之后，我完全不知道我该怎么做。

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..

以前有人已经用过Ember的YUI？

Someone already used YUI with Ember before ?

推荐答案

@Pranava Sheoran：是的，我设法找到这样的工作：

@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.

这是我的YUI表中的按钮：

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);
        });
    }
});

当您的视图呈现时，很可能调用didInsertElement。所以你可以在这部分使用简单的JQuery代码。
你发送到你的方法，无论你想从事件发送（这里是我的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 !!

这篇关于YUI与emberjs可数据与ember动态链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！