rsamec/react-binding

Data binding for react - bindToMixin

react-binding's Issues

Slow with arrays and ES6 classes.

Not sure what is going on, but when I bind to arrays the updates are extremely slow ()max 1-2 per second!. Do you have any idea what can be wrong?

export class ScheduleAdminView extends React.Component<Component, State> {
  constructor(props: Component) {
    super();
    this.state = {
      schedule: props.scheduleData.schedule
    };
  }



  render() {
    const schedule = scheduleData.schedule;
    const bind = Binder.bindToState.bind(null, this, 'schedule');

    return (
      <div>
        <form className={'ui form ' + clear} onSubmit={handleSubmit(save)}>
          <Segment>
            <SchedulePracticals model={Binder.bindArrayToState(this, 'schedule', 'items')} createPractical={createPractical} />
          </Segment>
        </form>
      </div>
    );
  }

export const SchedulePractical = ({ index, field }) => (
  <Form.Group key={index}>
    <Input model={Binder.bindTo(field, 'name')} width={9} />
  </Form.Group>
);

export const SchedulePracticals = ({model, allPracticals, createPractical }: ISchedulePracticalProps) => {
  let index: number;
  let field: string;
  return (
    <div>
      <For each="field" of={model.items} index="index">
        <SchedulePractical index={index} field={field} />
      </For>
    </div>
  );
};

Is possible define model without ".value" in component

In your example

<TextBoxInput model={this.bindToState("data","Employee.Contact.Email")} />

var TextBoxInput = React.createClass({
  render: function() {
    var valueModel = this.props.model;
    var handleChange = function(e){
      valueModel.value = e.target.value;
    }
    return (
      <input type='text' onChange={handleChange} value={valueModel.value} />
    )
  }
});

How i can set model to component (already written) if i just want set value as

var TextBoxInput = React.createClass({
  render: function() {
    var value= this.props.model;
    var handleChange = function(e){
      value= e.target.value;
    }
    return (
      <input type='text' onChange={handleChange} value={value} />
    )
  }
});

deeper binding question

First off I really like your project.

It looks like the structure of the initial state does not need to be defined up front, for example in the hobby sample, the initial state is basically an empty data object. As you type in the form fields, the structure of the data object is filled in, and you can see that in your pretty json.

  getInitialState: function() {
    return { data: {}};
  },

I tried to see how far that would go, and created a new plnkr that added 2 more inputs

        <TextBoxInput label="Street"  model={this.bindTo(this.props.personModel,"Address.Street")} />
        <TextBoxInput label="Phone"  model={this.bindTo(this.props.personModel,"Phone.Main.Number")} />

The 2 level deep object was filled in as expected, just like your existing inputs. The 3 level deep object did not fill in. This may be expected, but not sure. It would be slick if that worked as well.

edit ...
Adding the plnkr url for the updated sample

http://plnkr.co/edit/802962ElwKUd8tPFYan2?p=preview

Compatibility with browserify-shim

Hello!

I seem to having problem using react-binding with browserify-shim. I use gulp to bundle my app, and use this config:

"browserify-shim": {
"jquery": "global:$",
"react": "global:React",
"react-dom": "global:ReactDOM",
"react-bootstrap": "global:ReactBootstrap",
"react-router": "global:ReactRouter",
"react-binding": "global:ReactBinding",
"react-input-color": "global:ReactInputColor"
}

I include react-binding.js in index.html.

After all js is loaded in document, React app cannot find react-binding. It tries to do this in this code:

var _reactBinding = (typeof window !== "undefined" ? window['ReactBinding2'] : typeof global !== "undefined" ? global['ReactBinding2'] : null);

var _reactBinding2 = _interopRequireDefault(_reactBinding);

Do you know what is wrong and how to fix this?

BindTo object throws cannot call method getValue of undefined

The Binder.bindTo method throws an error
Cannot call method 'getValue' of undefined (STDERR) at PathParentBinding.Object.defineProperty.get [as value] react-binding\index .js:309:37)

Digging into the source i found Binder.bindTo to return a PathParentBinding, rather than an PathObjectBinding which is trying to access this.parent.source rather than this.parent to retrieve the value. Is there a particular reason for this behaviour? Shouldn't Binder.bindTo return a PathParentBinding?

Broken in IE8

Doesnt work in IE8 with shim/shams due to:

Object.defineProperty(PathObjectBinding.prototype, "requestChange", {
        get: function () {
            var _this = this;
            return function (value) {
                _this.value = value;
            };
        },
        enumerable: true,
        configurable: true
    });

Defining accessors (get or set) for non DOM elements is not supported under IE8 and cannot be emulated :(