Value binding not working with nested child views

1

Hey, I’m trying to create a custom container view for bootstrap form group, all is good so far but the value binding isn’t working. It does display the initial value, but if the model attribute changes, the input field does get updated.

Also the forBinding doesn’t work unless I bind it manually in the didInsertElement callback

Here is the code

Form.FieldView = Ember.ContainerView.extend
  classNames: 'form-group'
  tagName: 'div'
  type: 'text'
  label: null
  value: null
  size: '30'
  required: null
  requiredAttribute: (->
    if @get('required') == 'true' then '' else null
  ).property('required')

  childViews: 'labelView dataView'.w()

  labelView: Ember.View.extend
    tagName: 'label'
    classNames: 'col-sm-2 control-label'
    attributeBindings: ['for']
    textBinding: 'parentView.label'
    requiredBinding: 'parentView.required'
    defaultTemplate: Ember.Handlebars.compile('{{view.text}}{{#if view.required}}<abbr title="Required">*</abbr>{{/if}}')
    didInsertElement: ->
      @set 'for', @get 'parentView.dataView.dataInputView.elementId'

  dataView: Ember.ContainerView.extend
    tagName: 'div'
    classNames: 'col-sm-6'
    childViews: ['dataInputView']
    dataInputView: Ember.TextField.extend
      classNames: 'form-control'
      attributeBindings: 'type value size placeholder required'.w()
      typeBinding: 'parentView.parentView.type'
      sizeBinding: 'parentView.parentView.size'
      valueBinding: 'parentView.parentView.value'
      requiredBinding: 'parentView.parentView.requiredAttribute'
2

So I found a fix for the valueBinding problem, here it is

rootView: Ember.computed(->
  @nearestWithProperty 'isRootView'
).property().cacheable()
valueBinding: 'rootView.value'

But I don’t understand why this works though :smile: