Simplest Ember 5 Star Rating component

application-controller.js.coffee

App.ApplicationController = Ember.ObjectController.extent

  starRatingValue: Ember.computed(->
    "3"
  )

application.handlebars

Value: {{starRatingValue}}

{{star-rating value=starRatingValue}}

star-rating.handlebars

{{#each star in stars}}
  <span {{action 'setValue' star}}>
    [{{star.selected}} {{star.index}}]
  </span>
{{/each}}

star-rating_component.js.coffee

App.StarRatingComponent = Ember.Component.extend

  classNames: ['star-rating']

  value: 0

  stars: (->
    [1..5].map (i) =>
      Ember.Object.create({selected: (i<=parseInt(@get('value'))), index: i})
  ).property('value')

  actions:

    setValue: (star) ->
      @set('value', star.index)