Xác định mô hình cho thành phần Ember được sử dụng trong một loạt các tuyến đường khác nhau?

Question

Tôi muốn có thể xác định mô hình cho một mẫu thành phần bên trong phần tử Ember.Component thay vì bên trong tuyến đường nơi thành phần đang ngồi. Tôi chưa thấy bất kỳ ví dụ đó đang làm điều này ...

Ở đây tôi có mẫu thành phần của tôi:

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

Và đây là cách tôi đang đặt nó bên trong một tuyến đường mẫu:

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

Những gì tôi muốn làm là sử dụng Ember.Component liên quan của tôi để làm một số công cụ với các thông số của hộp thông tin và sau đó trả về một mô hình cho nó.

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

Tôi muốn để có thể sử dụng thành phần này bên trong một loạt các tuyến đường khác nhau, và tôi không muốn phải tham khảo các tuyến đường mà một thông tin-box đặc biệt là bên trong để cung cấp cho các thông tin -box mô hình của nó, là điều này có thể, hoặc tôi nên sử dụng một số tính năng khác, như một mẫu thường xuyên và trợ giúp hiển thị?

Answer 1

Một khi bạn có đối tượng mô hình, chỉ cần thiết lập các thuộc tính trên phần bản thân:

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

Bạn nên sử dụng kết xuất nếu bạn muốn xác định mô hình nào bạn muốn sử dụng (nếu mô hình khác với ngữ cảnh hiện tại). Nếu đó là bối cảnh tương tự, bạn chỉ nên sử dụng partials. Bạn cũng có thể tạo ra helper và truyền vào mô hình đó.

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

Cách sử dụng:

<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