Углеродные расчетные свойства в Coffeescript

Я хочу реализовать следующий код Javascript в Coffeescript

App.ItemView = Ember.View.extend({
    classNameBindings: ['itemId'],
    itemId: function() {
        console.log(this.get('content'));
        return "item-%@".fmt(this.get('content.id'));
    }.property('content.id'),
    templateName: 'item'    
});

Вот что я до сих пор в coffeescript:

App.ItemView = Ember.View.extend(
    classNameBindings: ['itemId']

    itemId: ->
        console.log this.get('content')
        contentId = this.get('content.id')
        "item-#{contentId}");
    .property('content.id')

    templateName: 'item'    
)

Я получаю:

Error: Parse error on line 11: Unexpected '.'

Проблема, похоже, связана с точкой в .property('content.id'). Я не знаю, как это переводится в Coffeescript. Как я могу правильно реализовать это представление в Coffeescript?

Ответ 1

Это довольно долгое время, но я думаю, что это должно быть написано так:

App.ItemView = Ember.View.extend(
  classNameBindings: ['itemId']

  itemId: (->
    console.log this.get('content')
    contentId = this.get('content.id')
    "item-#{contentId}");
  ).property('content.id')

  templateName: 'item'    
)

Ответ 2

itemId: (->
  content = @get 'content'
  if content
    return 'item-%@'.fmt(content.get 'id')
  null
).property('content.id')

Вы должны защитить вычисляемые свойства от значений, которые еще не определены. То есть ваш код в порядке, если на объекте контента уже есть свойство id. Если содержимое undefined, то вы не сможете найти его идентификатор, и вы, вероятно, увидите жалобу.

Вы также можете использовать

itemId: Ember.computed(->
  ..
).property('content.id')

и аналогичная картина для наблюдателей. Фактически, наблюдатель также выполнил бы то же самое без условного:

itemId: null

contentIdChanged: (->
  @set 'itemId', 'item-%@'.fmt(@get 'content.id')
).observes('content.id')

Ответ 3

Мне нравится использовать Ember.computed.

itemId: Ember.computed 'firstName', 'lastName', ->
  "#{@get('firstName')} #{@get('lastName')}"