1

I inherited an Ember project and have been learning as I go along. Several SO questions deal with Ember.Select bindings in a controller/view context. Im working in a component context and am having issues translating the advice & help.

And that may not even be what I need. My goal is to have a Select menu alter based on another select and vice versa. If a user chooses a MeasurementType below it should reduce the Units of Measure (uoms) to a list of those with that measurement type. If there is no measurement type and the user chooses a UOM then the Measurement Type should switch to the one used by the UOM.

handlebars code:

{{! ############## }}
{{! # Meas. Type # }}
{{! ############## }}
{{#unless hasMeasurementType}}
    <td class='col-lg-1'><span class="label label-default">{{unbound attribute.measurementType}}</span></td>
{{else}}
    <td class='col-lg-1'>
        {{view Em.Select content=measurementTypes
            optionValuePath="content.name"
            optionLabelPath="content.name"
            value=attribute.measurementType
        }}
    </td>
{{/unless}}

{{! ############## }}
{{! # UOM        # }}
{{! ############## }}
<td class='col-lg-1'>
{{view Em.Select content=uoms
                 optionValuePath="content.name"
                 optionLabelPath="content.name"
                 value=attribute.uom
}}
</td>

coffee script:

App.NumberAttributeComponent = Ember.Component.extend(
  tagName: 'tr'
  attributeBindings: ['data-id']
  precisions: [0, 1, 2, 3, 4, 5, 6]
  'data-id': Ember.computed.oneWay('attribute.id')
  'hasMeasurementType': false
  attributeMeasurementType: ''
  attributeUom: ''

  setHasMeasurementType: (->
    attribute = @.get('attribute')
    @.set('attributeMeasurementType', attribute.get 'measurementType')
    console.log("MT: " + @get 'attributeMeasurementType')
    @.set('hasMeasurementType', Ember.isNone(@get 'attributeMeasurementType'))
  ).on("init")

  setAttributeUom: (->
    attribute = @.get('attribute')
    @.set('attributeUom', attribute.get 'uom')
    console.log("UOM: " + @get 'attributeUom')
  ).on("init")

  setMeasurementTypeLookup: (->
    store = Specx.__container__.lookup('store:main')
    store.find('measurementType').then ((measurementTypes) =>
      @set 'measurementTypes', measurementTypes
    )
  ).on("init")

  getAllUoms: (->
    console.log("Get all UOMs")
    attribute = @.get('attribute')
    store = Specx.__container__.lookup('store:main')
    store.find('uom').then ((uoms) =>
      @set 'uoms', uoms
    )
  )

  getUomsByMeasurementType: (->
    console.log("Get some UOMs")
    attribute = @.get('attribute')
    store = Specx.__container__.lookup('store:main')
    store.find('uom').then ((uoms) =>
      @set 'uoms', uoms.filterBy('measurementType',attribute.get 'measurementType')
    )
  )

  updateUom: (->
    console.log("In updateUom")
    attribute = @get 'attribute'
    if Ember.isNone(@get 'attributeMeasurementType')
      @.getAllUoms()
    else
      @.getUomsByMeasurementType()
  ).observes('attributeMeasurementType', 'attributeUom')

#  didInsertElement: ->
#    console.log("In didInsertElement")
#    attribute = @.get('attribute')
#    @set 'attributeMeasurementType', attribute.get 'measurementType'
#    @set 'attributeUom', attribute.get 'uom'
#    console.log("New: " + attribute.get 'measurementType' + "; " + attribute.get 'uom')
#
#  willDestroyElement: ->
#    console.log("In willDestroyElement")
#    attribute = @.get('attribute')
#    @set 'attributeMeasurementType', attribute.get 'measurementType'
#    @set 'attributeUom', attribute.get 'uom'

  actions:
    edit: ->
      @toggleProperty('isEditing')
    save: ->
      model = @.get('attribute')
      editor = @
      @.set('attributeMeasurementType', model.get 'measurementType')
      @.set('attributeUom', model.get 'uom')
      model.save().then ((specification_attribute) =>
        $.growl.notice title: "Attribute", message: "Attribute saved!"
        editor.toggleProperty('isEditing')
      )
    cancel: ->
      @toggleProperty('isEditing')
ScottJShea
  • 7,041
  • 11
  • 44
  • 67
  • 1
    I'm hesitant to approach this without a working example via JSFiddle or JSBin... But, I just implemented something along the lines of you're talking about this evening for an app I'm building (alter a select menu based on some other input or select menu). If you can get a demo going I may be able to tune it up for you. – Matthew Blancarte Jun 23 '14 at 07:40
  • 1
    As another note, it's generally considered an anti-pattern to use the store inside of a component (it kind of kills the concept of it being reusable, it couples it tightly to that particular piece of code. Now being honest, you gotta do, what you gotta do. http://stackoverflow.com/questions/19969028/how-to-get-the-store-in-a-component-in-ember-js/19969992#19969992 – Kingpin2k Jun 23 '14 at 14:31
  • @MatthewBlancarte I will see if I can git a Fiddle up for it – ScottJShea Jun 24 '14 at 19:36
  • @kingpin2k I am not successful in finding the alternative to using the store in a component. I understand your point, just not sure what I should be doing instead. Pull from a controller instead? – ScottJShea Aug 11 '14 at 02:24

0 Answers0