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