Farklı Rotalarda kullanılan Ember Bileşeni için Model Tanımla?

Question

Ember.Component js içindeki bileşenin modelini, bileşenin bulunduğu yerin içine girmek yerine tanımlayabilmek isterim.

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

Ve burada bir rota şablonu içinde yerleştirerek am nasıl:

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

Ben burada

benim bileşen şablon var ... Bu yapıyoruz herhangi örneklerini görmedik

Yapmak istediğim, bilgi kutusunun parametreleriyle ilgili bazı şeyleri yapmak için ilgili Ember.Component'i kullanmak ve bunun için bir model döndürmek.

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

farklı yolları bir grup içinde bu bileşeni kullanmak mümkün istiyorum, ve belli bir bilgi kutusu bilgi vermek amacıyla içinde olduğunu rota başvurmak zorunda kalmak istemiyoruz -box modelini, bu mümkün mü yoksa normal bir şablon ve render yardımcısı gibi başka bir özelliği kullanmalı mıyım?

Answer 1

:

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

Kullanmak istediğiniz modeli tanımlamak isterseniz (eğer model geçerli içerikten farklıysa) render'i kullanmalısınız. Aynı bağlam varsa, sadece kısmi kullanmalısınız. Aynı zamanda yardımcı da üretebilir ve modele geçebilirsiniz.

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

Kullanımı: modeli nesnesi edindikten sonra bileşen kendisinde sadece belirlenen özellikler

<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