2013-08-22 13 views
5

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 ...Definiowanie modelu dla składnika Ember używanego w wielu różnych trasach?

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?

+0

To nie wynika z twojej pytanie, jak dataDef byłby używany do uzyskania modelu. Możesz wyjaśnić? –

+0

@MikeGrassotti Mam na myśli, myślę, że wystarczy powiedzieć, że zdobędę obiekt, który chcę wykorzystać jako mój model. Nie sądzę, abym musiał zapoznać się z konkretami (całkiem wyjątkowego) api, którego używam. Zaktualizowałem moje pytanie, aby podać przykład tego, jak model może wyglądać. Dzięki za pomoc! – sherlock

Odpowiedz

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

To rozwiązanie wydaje się bardzo ekscytujące, ale ta metoda nie działa dla mnie: http://jsbin.com/okiY/1/edit?html,js, output dzięki! To jednak: http://jsbin.com/okiY/2/edit?html,js,output NIESAMOWITE! – sherlock

+0

Kocham cię teraz. – sherlock

1

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

+0

Fajnie, dziękuję, miałem zamiar zapytać, jak mogę dopasować parametry (takie jak dataDef) do pomocnika renderującego, ale myślę, że twój przykład to pokazuje. – sherlock

Powiązane problemy