украшая данные из связанной модели в ember.js

Question

У меня есть Property модели и Pricing Summary модели, которые относятся друг к другу и показаны ниже:

App.Property = DS.Model.extend({ 
    totalRoomCount: DS.attr(), 
    name: DS.attr(), 
    address: DS.attr(), 
    city: DS.attr(), 
    state: DS.attr(), 
    zip: DS.attr(), 
    pricingSummaries: DS.hasMany('pricingSummary', {async: true}) 
}); 

App.PricingSummary = DS.Model.extend({ 
    startDate: DS.attr(), 
    endDate: DS.attr(), 
    days: DS.hasMany('day', {async: true}), 
    property: DS.belongsTo('property', {async: true}) 
}); 

Внутри моего маршрута собственности я поставил модель к Property, а затем в шаблоне, я хочу, чтобы вывести список PricingSummary-х, которые связаны с этой Property следующим образом:

{{#each pricingSummary in pricingSummaries}} 

{{render 'summaryRow' pricingSummary}} 

{{/each}} 

Это работает, и я в состоянии вывести атрибуты каждого конкретный PricingSummary внутри шаблона summaryRow, например, его startDate и endDate. Но то, что я ДЕЙСТВИТЕЛЬНО хочу здесь сделать, это изменить/форматировать startDate и вывести эту форматированную версию. В принципе, я думаю, что на данный момент я хочу контроллера, но я не знаю, как связать контроллер с конкретной моделью оценки цены.

Как это сделать? И, кроме того, вы можете видеть, что у PricingSummary также есть отношение к моей модели Day, поэтому я захочу сделать это еще раз, на другом уровне.

Пожалуйста, помогите!

Answer 1

Существует несколько способов сделать это, и все они относительно просты.

Для того, чтобы фактически украсить модель, самым простым методом было бы создание вычисленного свойства самой модели. Некоторым людям это не нравится, потому что они считают, что модели должны быть тощими, а декораторы должны быть в контроллерах/компонентах, но все зависит от ваших предпочтений. Вы можете выполнить это следующим образом:

App.YourModel = DS.Model.extend({ 
    date: attr('date'), 
    formattedDate: function() { 
    var date = this.get('date'); 
    return date ? this.get('date').toDateString() : null ; // Use your own format :-) 
    }.property('date') 
}); 

Кроме того, я хотел бы использовать шаблон геттера/сеттер, так что вы можете использовать двухсторонние привязки и мобилизуют значение на сегодняшний день на съемочной площадке, или в строку на получить. В следующем примере я использую moment.js для разбора/формат:

App.YourModel = DS.Model.extend({ 
    date: attr('date'), 
    dateMarshal: function(key, value) { 
    if (arguments.length > 1) { 
     var parsed = moment(value); 
     this.set('date', parsed.isValid() ? parsed.toDate() : null); 
    } 
    return this.get('date') ? moment(this.get('date')).format('MM/DD/YYYY') : null ; 
    }.property('date'), 
}); 

Другим вариантом было бы, чтобы обеспечить itemController свойство к {{#each}} помощника, но это фактически то же самое, как с помощью визуализации без необходимости использовать пользовательские Посмотреть.

Если вы используете больше свойств и, возможно, некоторые действия на итоговой цены строки (удалить его, например), я бы предпочел использовать компонент:

{{#each pricingSummary in pricingSummaries}} 
    {{pricing-summary-item content=pricingSummary}} 
{{/each}} 

и компонента:

App.PricingSummaryItem = Ember.Component.extend({ 
    content: null, 
    dateFormatted: function() { 
    var formattedDate = this.get('content.date'); 
    // Format your date 
    return formattedDate; 
    }.property('content.date') 
    actions: { 
    'delete': function() { 
     this.get('content').deleteRecord(); 
    }, 
    markRead: function() { 
     this.set('content.isRead', true); 
     this.get('content').save(); 
    } 
    } 
}); 

Наконец, для того, чтобы адресовать только дату, а не украшение, я бы сделал связанный помощник. Опять же, в этом примере используется moment.js (и я использую ember-cli, так что простите за синтаксис ES6):

import Ember from 'ember'; 

export function formatDate(input, options) { 
    input = moment(input); 
    if (options.hashContexts.fromNow) { 
    return input.fromNow(); 
    } else { 
    return input.format(options.hash.format || 'LL'); 
    } 
} 

export default Ember.Handlebars.makeBoundHelper(formatDate); 

Тогда вы просто использовать {{format-date yourDateProperty}} в шаблоне.