Definire il modello per il componente Ember utilizzato in una serie di percorsi diversi?

Question

Mi piacerebbe essere in grado di definire il modello per un modello di componente all'interno di Ember.Component js anziché all'interno del percorso in cui il componente è seduto. Non ho visto alcun esempio che stanno facendo questo ...

Qui ho il mio modello di componente:

<script type="text/x-handlebars" id="components/info-box"> 
    <div class="infoBox box"> 
     <p> 
      <label> 
       {{preUnits}} 
      </label> 
      <span> 
       {{value}} 
      </span> 
     </p> 
    </div> 
</script> 

Ed ecco come lo sto mettendo dentro template una via:

{{info-box title='Total Area' dataDef='buddhaData:DataGet/site/areaNum'}} 

Quello che mi piacerebbe fare è usare il mio rilevante Ember.Component per fare qualcosa con i parametri dell'info-box e poi restituire un modello per esso.

App.InfoBoxComponent = Ember.Component.extend({ 
    buildIt: function(){ 
     var container = $('#' + this.get('elementId')); 
     var title = this.get('title'); 
     var preUnits = this.get('preUnits') || ''; 
     var dataDef = this.get('dataDef'); 

     // Do stuff with dataDef. 

     var model = { 
      preUnits: '$', 
      value: 5000 
     } 

     // Hopefully return model somehow. 

    }, 

    didInsertElement: function(){ 
     this.buildIt(); 
    } 
}); 

Voglio essere in grado di utilizzare questo componente all'interno di un gruppo di percorsi diversi, e io non voglio avere a fare riferimento al percorso che un particolare Info-box è dentro di al fine di dare informazioni -box il suo modello, è possibile, o dovrei usare qualche altra caratteristica, come un modello normale e l'helper di rendering?

Answer 1

Una volta ottenuto l'oggetto del modello, le proprietà appena impostati sul componente stesso:

App.InfoBoxComponent = Ember.Component.extend({ 
    buildIt: function(){ 
    var container = $('#' + this.get('elementId')); 
    var title = this.get('title'); 
    var preUnits = this.get('preUnits') || ''; 
    var dataDef = this.get('dataDef'); 

    // Do stuff with dataDef. 

    var model = { 
     preUnits: '$', 
     value: 5000 
    } 

    // Set component's preUnits and value properties directly 
    this.setProperty('preUnits', model.preUnits); 
    this.setProperty('value', model.value); 

    // or 
    this.setProperties(model); 


    // Hopefully return model somehow. 

    }, 

    didInsertElement: function(){ 
    this.buildIt(); 
    } 
}); 

Answer 2

È necessario utilizzare il rendering se si desidera definire il modello che si desidera utilizzare (se il modello è diverso dal contesto corrente). Se è lo stesso contesto, dovresti semplicemente usare partial. Puoi anche generare helper e passare il modello a quello.

Ember.Handlebars.helper('autocomplete', Ember.View.extend({ 
    templateName: 'controls/autocomplete', 

    filteredList: function() { 
    var list = this.get('list'), 
     filter = this.get('filter'); 

    if (!filter) { return list; } 

    return list.filter(function(item) { 
     return item.name.indexOf(filter) !== -1; 
    }); 
    }.property('list.[]', 'filter') 
})); 

Usage:

<script type="text/x-handlebars" data-template-name="application"> 
    {{autocomplete list=list1}} 
    {{autocomplete list=list2}} 
    </script> 

    <script type="text/x-handlebars" data-template-name="controls/autocomplete"> 
    <p>{{input type="text" value=view.filter}}</p> 
    <ul> 
    {{#each view.filteredList}} 
     <li >{{name}}</li> 
    {{/each}} 
    </ul> 
    </script> 

Full example