Ext Two Way Model Binding would be great!

[hschaefer123]

Currently, most Sencha model bindings are working One-Way.

You are able to use a form and loadRecord/updateRecord, but a lot of other frameworks are currently implementing Two-Way binding.

SAP UI5 supports the following binding modes

• One Way ? The model implementation supports one-way binding, which means from the model to the view (value changes in the model will update all corresponding bindings and the view).
• Two Way ? The model implementation supports two-way binding, which means from the model to the view and from the view to the model (value changes in the model and in the view will update all corresponding bindings and the view and model, respectively).
• One Time ? The model implementation supports one-time binding, which means from model to view once.

This is quite a nice feature because you easily can bind all input elements directly to model fields which are automatically updated:

var oTextView = new sap.ui.commons.TextView("textView", { // bind text property of textview to firstName property in the model text: "{/firstName}", tooltip: "First Name"});
In this case any change in firstName will directly be reflected to all binded elements.

This is great if you have a checkbox value binded to
checked: {/enabled}
and a textfield which uses
enabled: {/enabled}

It is quite easy enable/disable or show/hide elements depending on model values.

This would make a lot of things much more easy instead of using an event and inside methode quering all the needed form fields to change field values!

Currently the Two-Way binding is only available (i think so) for Grids binded to models.

Inside SAPUI5 you have a globel model that is automatically bound to widgets (if not redefined).
To hierarchically address properties you can use the Binding Path ({/childmodel/name}) by / dotted.
The binding allows Element Binding, Property Binding or Aggregation Binding.

All in all this approach is something i miss inside Sencha.
This features have been formerly also been available inside Adobe Flex/BlazeDS models and ui bindings.

I think such a model binding functionality would fit greate directly on ext element level.
Why not be able to change properties during runtime by simply defining a global model and bound some element properties directly to to the model.

@Sencha
Are the currently any efforts to bring Two-Way bindings into forms or implement something similar using an event bus?

[Gary Schlosberg]

Thanks for the request! I have opened a feature request in our bug tracker (EXTJSIV-11709).

[halcwb]

I have implemented two form binding specifically to bind a complex object to a complex form. The heavily lifting is performed by the following mixin:

Ext.define('GenPresWebView.controller.mixin.bind.CanBindToForm', {

    bindingToForm: function (form, binding) {
        var me = this, b, bfield,
            bfields = me.ext.ComponentQuery.query('component[bindingName]', form);


        for (b in binding) {
            if (_.has(binding, b) && binding[b].value !== undefined) {
                bfield = _.find(bfields, function (bf) { return bf.bindingName === b; } );
                if (!bfield) Ext.Error.raise('cannot bind to field');
                bfield[binding[b].setter].call(bfield, binding[b].value);
            }
        }
    },
    
    formToBinding: function (form, binding) {
        var me = this, b, bfield,
            bfields = me.ext.ComponentQuery.query('component[bindingName]', form);


        for (b in binding) {
            if (_.has(binding, b)) {
                bfield = _.find(bfields, function (bf) { return bf.bindingName === b; } );
                if (!bfield || !bfield[binding[b].getter]) console.debug(b);
                if (bfield && bfield[binding[b].getter]) binding[b].value = bfield[binding[b].getter].call(bfield);
            }
        }


        return binding;
    }
});

The form has components (can be anything from a simple text field to a complex field set with combo boxes etc) and these components have setters and getters. First, you get a list of all components that have a binding name, secondly find the corresponding binding and call use the getter and setter defined by that binding to get or set the form field. The mapping from the business object to the binding object is performed by the controller.

[hschaefer123]

Hi Casper,
Thankx for the Code snippet.Sorry for the delayed Feedback, but i did Not got a Feedback Mail on new replies.Maybe i am thinking about prototyping such a function also in my Code Lib.Evaluation current JavaScript libs i figured out a lot of new approaches implementingMVW, MVVM or classic MCV like emberjs or angularjs.All this new approaches have a DOM / JavaScript bridge That sync changes between DOM Elements and javascript models.During Sencha I get to know that Sencha is also working on a new declarative HTML approach that will automatically generate a view controller for each HTML template, but i found no deeper information.Playing around with nodejs, Meteor and something similar the used MVC Concept seems a little Bit outdated.Hopefully Sencha will find a Way to push the html5 needs for 2014 Apps the same innovative Way like the competitors do.

Cheers Holger