Ember와 Handsontable 사용

Question

Ember-Data 모델을 Handsontable에 가져올 수 있지만 데이터를 Handsontable에 저장하여 Ember-Data로 다시 저장하는 방법을 모르겠습니다. https://github.com/bradparker/ember-handsontable

내 목표는 표시하는 방법과 같은 스프레드 시트를 가지고 데이터를 저장하는 것입니다 : 나는 GitHub의에서 다음을 찾을 수

App.ChapterView = Ember.View.extend({ 
    templateName : 'statVals', 
    tagName: 'div', 
    classNames: ['dataTable'], 
    insertTable: function(){ 
    var data = this.get('controller.model.content'); 
    var divElement = jQuery('.dataTable'); 
    divElement.handsontable({ 
     startRows: 3, 
     data: data, 
     columns: [ 
     {data: "id"}, 
     {data: "_data.location"}, 
     {data: "_data.page"}, 
     ], 
     minSpareRows: 1 
    }); 
    }.on('didInsertElement') 
}); 

이 내가 Handsontable에 엠버 - 데이터를 가져 해낸 것입니다 내 웹 앱. 손수건이 법안에 어울리는 것 같지만 어쩌면 엠버와 뭔가 다른 것을 사용해야합니까?

Answer 1

내 구성 요소입니다. 작동하지만 Ember Data Store에 액세스하지 않고 레코드를 직접 저장하지 않도록 수정해야합니다. 일단 내가 진정한 구성 요소를 가지고이 게시물을 업데이 트 계획이다.

App.HandsOnComponent = Ember.Component.extend({ 
    tagName: 'div', 
    classNames: ['dataTable'], 

    //create a unique Div ID for each chart 
    tableDivID: function() { 
     var rand = String(Math.random()); 
     var randMod = rand.split('.').join(""); 
     return 'table' + randMod + 'div'; 
    }.property(), 


    //Insert the Handsontable 
    insertTable: function(){ 
    var chapter = this.get('chapter'); 
    var statData = this.get('chapter.statData');   
    var divID = this.get('tableDivID'); 
    var divIDSelector = '#' + divID; 
    var divElement = jQuery(divIDSelector); 
    var _this = this; 

    if (typeof(chapter.get('statData')) == 'undefined') { 
     chapter.set('statData', [ 
      [0, 0], 
     ]); 
     chapter.save(); 
    } 


    //Constructor for the Handsontable 
    divElement.handsontable({ 
     startRows: 2, 
     data: statData, 
     stretchH: 'last', 
     fixedRowsTop: 0, 
     colHeaders: ['Date', 'Value'], 


     cells: function (row, col, prop) { 
     var cellProperties = {}; 
     var RowRenderer = function(instance, td, row, col, prop, value, cellProperties) { 
      Handsontable.renderers.TextRenderer.apply(this, arguments); 
      td.style.fontWeight = 'normal'; 
      td.style.color = '#FFFFFF'; 
      td.style.background = 'rgba(255, 255, 255, 0.3)'; 
      //td.style.border-color = '#FFFFFF'; 
     }; 
     return cellProperties; 
     }, 

     columns: [ 
     { 
      //column options for the first column 
      type: 'date', 
      dateFormat: 'yy/mm/dd', 
      allowInvalid : false, 
     }, 
     { 
      type: 'numeric', 
      Format: '0,0.00', 
      allowInvalid : false, 
     }, 
     ], 

     minSpareRows: 1, 

     afterChange: function (change, source) { 
     if (source === 'loadData') { 
      return; //don't save this change 
     } 
     var htInstance = $(divIDSelector).handsontable('getInstance'); 
     //var statData = chapter.get('statData'); 
     var statData = htInstance.getData(); 
     chapter.set('statData', statData); 
     chapter.save(); 
     }, 


    }); 
    }.on('didInsertElement'), 

    actions: { 
    saveStatVals: function() { 
     var store = this.get('storeName'); 
     var chapter = store.getById('chapter', chapterId); 
     var handsontable = $('.dataTable').handsontable('getInstance'); 
     var dataTable = handsontable.getData(); 
     var _chapter = this.get('controllers.chapter'); 
     var _chapterId = _chapter.get('id'); 
     var chapter = this.store.getById('chapter', _chapterId); 
      chapter.get('cont').pushObject(dataTable); 
      chapter.save(); 
    }, 
    },  
});