EmberJS: Wie eine Komponente Funktion von einem Controller rufen und berechnen die Komponentendaten

Question

ich eine Strecke (Hülsen Struktur) sagen Protokolle können erstellt und ich geschaffen, um die controller.js, route.js und template.hbs

In die Vorlage Ich initialisierte eine Rasterkomponente. Ich arbeite auch an einer benutzerdefinierten Paginierungskomponente.

Wenn ich die Rasterkomponente initialisiere, habe ich als Attribute die Daten, die sich ändern, nachdem ich die Seite von Seitenumbruch geändert habe und auch die Seitengröße berechnen möchte, wie viele Zeilen in den Rastercontainer passen. Und mit der pageSize kann ich die totalPages berechnen.

Ich habe die Funktion der Berechnung der pageSize in der Grid-Komponente, aber ich möchte diese Nummer in meinem Controller.js. Das habe ich geschafft, indem ich die Aktion gesendet habe und ich habe erfolgreich die Nummer auf meinem Controller.

Dann auf DataHandler berechnete Eigenschaft möchte ich die Daten berechnen, die das Raster zeigen wird. Dort habe ich den Verfall Fehler und auch nichts wird in der Tabelle angezeigt:

Abgrenzung: Eine Eigenschaft von wurde innerhalb der didInsertElement Hook geändert. Sie sollten die Eigenschaften von Komponenten, Diensten oder Modellen während didInsertElement niemals ändern, da dies zu erheblichen Leistungseinbußen führt. [Deprecation-ID: ember-views.dispatching-modify-Eigenschaft]

Ist dieses Szenario möglich? Wenn ja, was ist der beste Weg?

Unter meinen Code:

logs/controller.js

export default Ember.Controller.extend({ 
    dataHandler: Ember.computed('pageSize', { 
    set(key, value) { 
     if (value) { 
     this.set('pageSize', value); 
     } else { 
     this.set('pageSize', null); 
     } 
     return value; 
    }, 
    get() { 
     let data = this.get('data'); 
     if (!data) { 
     let pageSize = this.get('pageSize'); 
     data = this._data(); //Here will calculate the data and pass them to component 
     this.set('data', data); 
     } 
     return data; 
    } 
    }), 
    actions: { 
    setPageSizeFromDataGrid(pageSize) { 
     this.set('dataHandler', pageSize); 
    } 
    } 
}); 

logs/template.hbs

<div class='row'> 
    <div class='col-md-12'> 
    <h1>Request Logs</h1> 
    {{#si-data-grid data=dataHandler rowHeight=35 pageSize="setPageSizeFromDataGrid"}} 
     //some content 
    {{/si-data-grid}} 
    </div> 
</div> 

mein component.js

export default Ember.Component.extend({ 
    didRender() { 
    let that = this; 
    that._calculateContainerHeight(); 

    let children = that.childViews; 
    let rowHeight = that.rowHeight || 20; 

    let data = that.data; 

    let columns = that._parseColumns(children); 
    let pageSize = that.getPageSize(rowHeight); 

    that.sendAction('pageSize', pageSize); 

    Ember.$(that.get('element')).find('div#si-data-grid').kendoGrid({ 
     columns: columns, 
     dataSource: new kendo.data.DataSource({ 
     data: data 
     }) 
    }); 

    Ember.$(that.get('element')).find('div#si-data-grid tr').css('height', rowHeight); 

}, 
getPageSize(rowHeight) { 
    let paginationHeight = 40; 
    let gridHeaderHeight = this.$().offsetParent().offset().top; 
    let height = this.$().height() - gridHeaderHeight - paginationHeight; 
    return Math.floor(height/rowHeight); 
} 
}); 

Answer 1

ich es geschafft, finde eine Lösung für mein Problem.

In meinem component.js fügte ich die didInsertElement und Zeitplan afterRender die Aktion

export default Ember.Component.extend({ 
    didInsertElement() { 
    Ember.run.scheduleOnce('afterRender', this, '_updateChildViews'); 
    }, 
    didRender() { 
    //some code 
    }, 
    _updateChildViews() { 
    let that = this; 
    let rowHeight = that.rowHeight; 
    let pageSize = that._getPageSize(rowHeight); 
    this.sendAction('updateData', pageSize); 
    } 
}); 

auf logs/template.hbs senden

<div class='row'> 
    <div class='col-md-12'> 
    <h1>Request Logs</h1> 
    {{#si-data-grid data=dataHandler rowHeight=35 updateData='updateData'}} 
     //some code 
    {{/si-data-grid}} 
    </div> 
</div> 

und auf meine logs/controller.js

export default Ember.Controller.extend({ 
    dataHandler: Ember.computed('pageSize', { 
    set(key, value) { 
     if (value) { 
     this.set('data', this._data()); //calculate the data to be shown on the data grid component  
     } else { 
     this.set('data', []); 
     } 
     return this.get('data'); 
    }, 
    get() { 
     let data = this.get('data'); 
     if (!data) { 
     this.set('data', []); 
     } 
     return data; 
    } 
    }), 
    actions: { 
    updateData(pageSize) { 
     this.set('dataHandler', pageSize); 
    } 
    } 
});