Definiowanie modelu dla składnika Ember używanego w wielu różnych trasach?

Question

Chciałbym móc zdefiniować model szablonu komponentu wewnątrz komponentu Ember.Component zamiast wewnątrz trasy, na której znajduje się składnik. Nie widziałem żadnych przykładów, które są w ten sposób ...

Tutaj mam szablon komponent:

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

A oto jak ja umieszczenie go wewnątrz szablonu jedna droga:

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

Co chciałbym zrobić, to użyć odpowiedniego pliku Ember.Component, aby zrobić kilka rzeczy z parametrami pola-informacji, a następnie zwrócić dla niego model.

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

Chcę, aby móc korzystać z tego komponentu wewnątrz kilka różnych tras, a ja nie chcę się odnieść do drogi, że dana info-box jest wewnątrz w celu nadania informacji - czy jego model jest możliwy, czy powinienem użyć innej funkcji, takiej jak zwykły szablon i pomocnik renderowania?

Answer 1

Gdy masz modelu obiektowego, wystarczy ustawić właściwości na składniku samego:

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

Powinieneś używać renderowania, jeśli chcesz zdefiniować model, którego chcesz użyć (jeśli model jest inny niż bieżący kontekst). Jeśli jest to ten sam kontekst, powinieneś po prostu użyć partials. Można również wygenerować pomocnika i przekazać do tego model.

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

Zastosowanie:

<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