Comment passer outre les propriétés d'un ajouter dans Ember

Question

Je blême utiliser addon Ember-modèles-table et définissez les valeurs par défaut pour CustomIcons et customClasses donc j'ai ajouté un composant appelé formulaire table

app/composants/form-table.js

et a ajouté le code suivant à ce modelsTableComponent d'importation de « Ember-modèles table/c omponents/models-table ';

import modelsTableComponent from 'ember-models-table/components/models-table'; 

export default modelsTableComponent.extend({ 
    didInsertElement: function() { 
     this._super(...arguments); 

     this.$().attr('customIcons', Ember.Object.create({ 
      "sort-asc": "fa fa-chevron-down", 
      "sort-desc": "fa fa-chevron-up", 
      "column-visible": "fa fa-check-square-o", 
      "column-hidden": "fa fa-square-o", 
      "nav-first": "fa fa-chevron-left", 
      "nav-prev": "fa fa-angle-left", 
      "nav-next": "fa fa-angle-right", 
      "nav-last": "fa fa-chevron-right", 
      "caret": "fa fa-caret-down", 
      "expand-row": "fa fa-plus", 
      "collapse-row": "fa fa-minus" 
     })); 

     this.$().attr('customClasses', Ember.Object.create({ 
      "clearFilterIcon": "fa fa-times form-control-feedback", 
      "clearAllFiltersIcon": "fa fa-times-circle-o" 
     }));  
    } 
}); 

mais quand je l'appelle

{{form-table 
      data=table.data 
      columns=table.columns}} 

des application.hbs dans le dossier des modèles et ayant le code suivant application.hbs l'intérieur dans le dossier du contrôleur je ne vois rien. Et je ne reçois aucune erreur non plus.

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    table: { 
     data: [ 
      Ember.Object.create({ id: 1, firstName: 'john', lastName: 'Smith', city: "CityA" }), 
      Ember.Object.create({ id: 1, firstName: 'bob', lastName: 'Smith', city: "CityB" }), 
     ], 
     columns: [ 
      { 
       "propertyName": "id", 
       "title": "ID" 
      }, 
      { 
       "propertyName": "firstName", 
       "title": "First Name" 
      }, 
      { 
       "propertyName": "lastName", 
       "title": "Last Name" 
      }, 
      { 
       "propertyName": "city", 
       "title": "City" 
      } 
     ] 
    }, 

}); 

Howerver si je remplace mon code dans le fichier application.hbs de

{{form-table 
       data=table.data 
       columns=table.columns}} 

à

{{models-table 
       data=table.data 
       columns=table.columns}} 

tout fonctionne. Cela signifie-t-il que je ne peux pas prolonger un ajout?

Answer 1

Vous avez manqué le modèle pour votre composant {{form-table}}. Si vous ne disposez pas de changer la mise en page des composants spécifier simplement qu'il est modèle lors de l'extension:

export default modelsTableComponent.extend({ 
    layoutName: 'components/models-table' 
}); 

Oh juste noté de réponse @kumkanillam que vous aussi en utilisant didInsertElement mauvais lien. DidInsertElement hook est destiné à la manipulation des éléments dom. Si vous souhaitez fournir différentes valeurs par défaut au composant {{models-table}}, vous devez définir customIcons et customClasses comme propriétés de votre composant étendu. ember-models-table utilise getWithDefault pour accéder à la propriété. Puisque les propriétés seront toujours définies, cela récupèrera vos propriétés définies dans extend. Vous êtes toujours capable de transmettre des valeurs personnalisées à un composant sur une déclaration, comme suggéré par kumkanillam.

donc votre composant étendu devrait ressembler à:

import modelsTableComponent from 'ember-models-table/components/models-table'; 

export default modelsTableComponent.extend({ 
    layoutName: 'components/models-table', 
    customIcons: { 
    "sort-asc": "fa fa-chevron-down", 
    "sort-desc": "fa fa-chevron-up", 
    "column-visible": "fa fa-check-square-o", 
    "column-hidden": "fa fa-square-o", 
    "nav-first": "fa fa-chevron-left", 
    "nav-prev": "fa fa-angle-left", 
    "nav-next": "fa fa-angle-right", 
    "nav-last": "fa fa-chevron-right", 
    "caret": "fa fa-caret-down", 
    "expand-row": "fa fa-plus", 
    "collapse-row": "fa fa-minus" 
    }, 
    customClasses: { 
    "clearFilterIcon": "fa fa-times form-control-feedback", 
    "clearAllFiltersIcon": "fa fa-times-circle-o" 
    } 
}); 

Assurez-vous également de supprimer le fichier de modèle généré automatiquement si vous en avez un. Sinon, cela remplacera le modèle hérité.

Toujours dans la version Ember 2.0, layoutName n'est plus nécessaire.