Question

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

我想添加一个新的列名“detail”，并将每个enquriry的链接放在其中＆lt;

到目前为止，我有这个：

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

希望这可以帮到你!!

YUI with emberjs Datatable with ember dynamic link

1 个答案: