Dynamic Component Binding?

[Gil Birman]

I'm trying to optimize shouldComponentUpdate by only binding to the data that really matters...

Am I not supposed to use a binding whose path is always changing? For example, my render function looks something like this:

var binding = this.getDefaultBinding(),
        currentChartIndexBinding = binding.sub('currentChartIndex'),
        currentChartIndex = currentChartIndexBinding.get(),
        chartBinding = binding.sub('history').sub(currentChartIndex);

    return (
      <div className="fill">
        <FlowChart binding={ {default:chartBinding, index:currentChartIndexBinding } } />
      </div>
    )

So I am binding to currentChartIndexBinding because the chart index might change. But even if the chart index doesn't change, the data in the current chart might change which is why I bind to chartBinding.

As you would expect, currentChartIndexBinding works fine. Unfortunately, what happens is that chartBinding is always one step behind. Ie., in shouldComponentUpdateOverride, which is defined in the FlowChart component, this.getDefaultBinding().toJS() returns the previous value.

Is this a bug, or expected behavior?

[Aliaksandr Siamionau]

Hello, @gilbox.

So, you define a component with two bindings and in shouldComponentUpdateOverride one of the bindings returns outdated value? I will look into that.

[Gil Birman]

I've reproduced the bug in a simple plunker. In this demo, the sub-binding doesn't update at all, and I think it's for the same reason that I mentioned above.

The abridged render code is:

  var binding = this.getDefaultBinding(),
      index = binding.get('index'),
      subBinding = binding.sub('history').sub(index);

  return (
    <div>
      <Sub binding={subBinding} /> 
    </div>
  )

[Aliaksandr Siamionau]

Thanks, very helpful.

[Aliaksandr Siamionau]

Dynamic bindings are now supported in 0.7.5.

[Aliaksandr Siamionau]

BTW, plunker example should now work.