React.js 2-way bindings: two-levels deep path in valueLink

data-binding, javascript, reactjs

Solution

Edit:

I realized that deep-path for `LinkedState` is pretty cool so I try to implement it. The code: https://gist.github.com/tungd/8367229 Usage: http://jsfiddle.net/uHm6k/3/

As the document stated, `LinkedState` is a wrapper around `onChange/setState` and meant for simple case. You can always write the full `onChange/setState` to achieve what you want. If you really want to stick with `LinkedState`, you can use the non mixin version, for example:

getInitialState: function() {
    return { values: [
        { type: "translateX", x: 10 },
        { type: "scaleX", x: 1.2 }
    ]}
},
handleTypeChange: function(i, value) {
    this.state.values[i].type = value
    this.setState({ values: this.state.values })
},
render: function() {
    ...
    this.state.values.map(function(item, i) {
        var typeLink = {
            value: this.state.values[i].type,
            requestChange: this.handleTypeChange.bind(null, i)
        }
        return <div><input valueLink={typeLink}/></div>
    }, this)
    ...
}

Here is working JSFiddle: http://jsfiddle.net/srbGL/

Problem

My state is: ``` [ {type: "translateX", x: 10}, {type: "scaleX", x: 1.2} ] ``` I’m using Two-Way Binding Helpers and I can’t provide a valid key string for `linkState`: ``` this.state.map(function(item, i) { return <div><input valueLink={this.linkState( ??? )}></div> } ``` Would be nice if `this.linkState` accepted some query syntax, such as `"0.type"` to retrieve `"translateX"` from my example. Are there any workarounds? I wrote DeepLinkState mixin which is a drop-in replacement for React.addons.LinkedStateMixin. Usage example: ``` this.state.map(function(item, i) { return <div><input valueLink={this.linkState([i, "x"])}></div> } ``` `linkState("0.x")` is also acceptable syntax.

Original source