johnlouderback/gdb

Generic Data Binder (GDB) for jQuery is a framework agnostic and extremely easy to use 2 way data binder. GDB binds views and models in realtime with live two-way binding and no hefty framework necessary.

gdb's Issues

Get a model back as plain JSON.

GDB changes a model so it is no longer a plain Javascript object which of course it has to. However I can't see a method to convert back to a plain JS object. I'm using:

var o_model = JSON.parse( JSON.stringify( model ) );

Am I missing something? If not how about adding a plainModel( model ) function to GDB to do this.

v1.2 Released

A new version with new features has been added. Check out the examples on the website and read the updated read me file.

Pass parameter to click method

There is the possibility to do an if and else in html?

render selector bug

works with:
var selector=$(options.rootElementSelectorString).find("[" + options.dataBindToAttr + "],[" + options.dataWatchingAttr+"]");

Add more usage examples

Add more usage examples showing more powerful capabilities.

Issues with elementChangeCallback and modelChangeCallback

Hi John,
In elementChangeCallback on line 329: newValue: options.bindAsTextOnly ? $this.text() : $this.html() only makes sense if the element is contenteditable, otherwise newvalue is an empty string. I think it should be: newValue: rawValue.

Also on line 428: oldValue = change.type doesn't make sense as this results in oldValue being set to update. And therefore modelChangeCallback having this incorrect value.

Binding not maintained after assigning new array value

Wonderful binder, thanks for your work on this.

I've run across a situation where the binding no longer works as expected. When replacing a bound array, the binding isn't being maintained.

HTML:

<span data-bindto="model.arr[0]" contenteditable="true"></span>

JS:

$(function(){ 
    //GDB is only available once jQuery is ready.
    var model = { arr: ["value0"] };
    model.arr[0] = "value1";
    GDB({ "model":  model }, {debugLogging: true});
    model.arr = ["value2"];
    model.arr[0] = "value3";
    console.log(model);
    // model.arr[0] is "value3",
    // but data-bindto="model.arr[0]" is still "value1"
});

Here's a working example showing the problem:
http://jsfiddle.net/foggyouttherenow/xfnftcdp/

Add ability to work with new HTML5 form elements

Add ability to use new HTML5 form elements such as <datalist>,<keygen>, and <output>

Not working properly with radio or checkbox inputs

Make a fix for so that radio and checkbox inputs work properly and as expected.

Firefox bug with contenteditable element

In Firefox, when altering a contenteditable element, the caret moves back to the beginning of the text.

The reason is because when the view updates the model, the model, in turn, updates the view. This behavior is unwanted and this causes the view to update while the user is typing and thus resetting the caret in Firefox.

Possible solution is adding a "tag" of sorts to the view data when inserting into the model and removing the tag when the model has sensed that it has been altered. If the tag is detected, the new information will not be added to the view and the tag will removed.

Potential problems can arise if the tag is not unique enough that it be genuine user input.
Proposed tag: gdb-do-not-insert-into-view-gdb:

Automated model creation

Something I've been thinking about recently is the ability to create a model by parsing the specified dom branch. Most of my use for 2 way bindings is with Bootstrap Modal dialogs.

So I'd call a function passing it the root element of the dialog and it would look for data-bindto="xyz" attributes and return an object that represented the model.

I appreciate that this may only work for simpler models, but that's fine for my use case.

-Neville

Work with buttons

Hi John,
Today I tried to use GDB with a button and not too surprisingly it didn't work. This is a Bootstrap button than in effect works like a checkbox and I want to be able to set it's state and then get it.

<button href="#" type="button" class="btn" data-toggle="button" data-bindto="login.persistUserName">User Name</button>

var model = { persistUserName: true };

Changes the button text to "true' instead of it's state.

As this is Bootstrap specific (we add/remove a .active class) I doubt whether GDB can handle it, but I thought I'd post to see if you have any thoughts.

iOS and Android Browser Support?

Hi John!

I'm currently considering whether to use GDB in a Cordova/PhoneGap Web-app. Is there any information regarding the support on mobile browser as Mobile Safari on iOS and the Android OS's Browser, yet?

Any information will be appreciated!

Thanks!
—Chris

AMD and other feedback etc.

I've read through the docs and tried the examples and GDB looks good. I am currently using http://weepy.github.io/o_O/ in an app and it has several shortcomings, including the lack of as you type model updates. I've also spent a lot of time searching for simple 2-way binding code and there isn't much around unless of course you use larger MVC, MVVM etc, frameworks. Other that o_O the other lib I've considered is rivets.js

A few things I'd welcome in GDB include AMD support, a non-jQuery implementation and moving the pollyfills to a separate module.

Also do you have any plans / thoughts on publishing a 'change' style event when content changes.

-Neville

Two-Way Data Binding Article.

Hi John,
You may be interested in this article Two-Way Data Binding. I've added a comment mentioning GDB.

Problem with inserted HTML

Hi John,
I'm inserting some html into a page and then calling gdb with the model for the items I want to bind to in the inserted html. The same page has two other chunks of markup which gdb is bound to. When I type into an <input> in the inserted html the line:

eval("modelsToMonitor." + modelLocation + "=" + value);

raises an exception. When I look in the debugger the value of modelsToMonitor is not the correct model, it is instead the model for the first chunk of html gdb was called for on the page.

Looking at the code it appears that gdb only works with a single model, period as modelsToMonitor is set to the model for the most recent GDB call. Is that right?

I'm confused about the use of multiple gdb instances and whether this is even possible?

Bug with rootElementSelectorString

Hi John,
I've just downloaded the latest version to use in another app and found a problem with rootElementSelectorString. If I don't specify it I get an error in the IFE where options.rootElementSelectorString = el_get(options.rootElement); because el_get() is returning an element and rootElementSelectorString needs to be a selector string.

I'm also confused re. the use of rootElementSelectorString as the docs indicate it is now deprecated and therefore I would assume if it wasn't specified it would be ignored.

Not seeing model value in dom

@JohnLouderback With the following code:

$(function(){
    var model = { name: "Ms. Trunchbull" };
    gdb( { login: model },
         {
            debugLogging: true,
            modelChangeCallback: function( o_changed ){
                console.log( 'In GDB modelChangeCallback() o_changed: ', o_changed );
            }
         }
    );

    // model.name = 'Nifty Neville';
});

<input type="text" class="form-control" id="InputName" data-bindto="login.name" placeholder="User Name">

I'm not seeing: "Ms. Trunchbull" displayed in the input element. If I uncomment model.name = 'Nifty Neville'; then 'Nifty Neville' is displayed.

Further when I type in the input field I see the console.log output from: modelChangeCallback()

-Neville

Add ability to create and map data parsing functions

Add the ability to parse data in the view before inserting it back into the model.

Using GDB with an iframe

Hi John,
I'm using an iframe and inside that I want to use GDB. I've tried using:
new gdb( { page_selection: web_page_selection_model }, { rootElementSelectorString: 'iframe' } );
and a few other rootElementSelectorString selectors without any success.

I have a feeling the current gdb code won't handle this.

-Neville

Uncaught SyntaxError: Unexpected token ILLEGAL

Hi John,
If you enter a\ into your Simple Example (and in my app) you get an error: Uncaught SyntaxError: Unexpected token ILLEGAL on line eval("modelsToMonitor." + modelLocation + "=" + value);.

http://gdb.thewebdev.guru/ broken.

Hi John,
Your site http://gdb.thewebdev.guru/ is showing the following error.

You don't have permission to access / on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Add minor templating feature

Add feature to allow for templating data within elements.
Proposed syntax:

<div data-bindto-template="<<model.users[2].firstName>> <<model.users[2].lastName>>">John Louderback</div>

Realtime doesn't work on contenteditable fields in Internet Explorer

The "input" event does not fire on contenteditable fields in Internet Explorer despite the fact the Internet Explorer 9+ supports the "input" event. Because IE supports the "input" event, the "keyup" fallback does not occur.
A potential fix for this could be falling back on "keyup" if the browser is IE. This fix does still have its caveats, however. This does not account for context menu options such as "cut, "paste", and "delete" and is thus not entire ideal.
Further research will be needed.