2014-02-13 2 views
0

Недавно я открыл для себя YUI, и я хотел использовать его с моим электронным приложением. Я хотел создать динамическую ссылку из ember, но внутри datatable widget of YUI.YUI с emberjs Datatable with ember dynamic link

Я хочу, чтобы добавить новое имя столбца «детали» и поставить ссылку каждого enquriry в нем <

меня это до сих пор:

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

Раньше я использовал уголек, как это для создания моих данных:

<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, я не знаю, как это сделать.

Кто-то уже использовал YUI с Ember?

+0

Облицовка одной и той же проблемы. Вы когда-нибудь находили решение для этого? –

+0

Я опубликовал свое обходное решение как ответ, который вы можете посмотреть, и я надеюсь, что это поможет вам. – SuperMarco

ответ

2

@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 в этой части. И вы посылаете ваш метод, что вы хотите передать события (вот мой ид) и вы ловите его с вашим контроллером и маршрутизатором, как это:

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

Надеется, что это может помочь вам !!

+0

Спасибо. Это работает. Ты спас мне столько времени! –