带有 emberjs 的 YUI 带有 ember 动态链接的数据表

Question

我最近发现了 YUI，我想将它与我的 ember 应用程序一起使用。我想从 ember 生成一个动态链接，但在 YUI 的数据表小部件内。

我想添加一个新的列名“detail”并将每个查询的链接放入其中

到目前为止我有这个：

    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 来生成数据的：

<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 生成的，所以我完全不知道我该怎么做..

之前有人已经在 Ember 中使用过 YUI 吗？

Answer 1

@Pranava Sheoran：是的，我设法找到了这样的解决方法：

您最有可能要做的就是从视图中捕捉事件。

这是我的 YUI 表中的按钮：

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

使用此行，它将生成数据值等于您在数据中提供的值的按钮。

您在视图中捕捉到这样的事件：

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）发送到您的方法，然后像这样用控制器和路由器捕获它：

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

希望对你有帮助！！