grnadav / databind Goto Github PK

What about binding passwords?

Uncaught NoModificationAllowedError: Failed to set the 'innerText' property on 'HTMLElement': The 'input' element does not support text insertion.

Love what you've done so far.

Given the number of similar projects out there are the moment though, it would be interesting if you could consider taking this down a different path from a syntax perspective.

I've be playing with the idea of data binding library that looks like this...

        var bandItem = bindi.find(".bandItem").mapTo(bands);
        var bandItemsEmpty = bindi.find(".noBands").mapTo(bands, ifEmpty);
        var memberItem = bindi.find(".memberItem").mapTo(bandItem.members);
        var memberItemsEmpty = bindi.find(".noMembers").mapTo(bandItem.members, ifEmpty);

Making it easy to learn and easy to read are the key goals for me (I think this is the major shortcoming of the popular frameworks like angular). The approach I'm going for keeps all the model definition and binding logic together and creates a situation where the removal of the binding script leaves the UI looking like a healthy template. This last factor is useful in recognition of the workflow usually taken on web projects - mockup the UI, then bind some data to it.

This is as far as I've got so far... https://gist.github.com/m1sta/5843286

I tried your example project, and faced this issue.
Steps to reproduce: (In example project)
1.Select the 1st element (key: k1.k11) and click on bind
2.Now Click on unbind
3.Again click on bind
4.Now type in the text-box.
As the DOM and Model are bound, the changes should be reflected on either side.
Issue: Its not happening as expected.

You have such string:
['text', 'textarea', 'select-one']

But there are some other types
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
http://www.w3schools.com/html/html5_form_input_types.asp

(live sample at http://jsfiddle.net/lrkwz/q3tb9b0o/7/)
Suppose I have a model with an array of elements such as:

var user = {
        name: "Lrkwz",
        terms_conds: [
            {
                id: 100,
                accepted: true
            }, {
                id: 103,
                accepted: false
            }
    ]
};
DataBind.bind($('#myform'), user);

how would you bind it to a form?

<form id="myform">
    <label>Your name
        <input id="name" data-key="name" />
    </label>
    <label>Accept privacy 1
        <input id="100" data-key="terms_conds.accepted" type="checkbox" />
    </label>
    <label>Accept privacy 2
        <input id="103" data-key="terms_conds.accepted" type="checkbox" />
    </label>
</form>

NOTE: the number of is the same of the number of elements in terms_conds

I already use it, so having two watchJS is a bit confusing.

Is it possible to provide
databind.js
databind.pkgd.js

?

Could you consider adding this to npm and/or bower? It would be pretty easy to install on new projects

What if you modified the syntax to make the databind "smarter"? So instead of

<div id="id1">
    <div>
        <textarea data-key="k1" rows="5" cols="30"></textarea>    
    </div>
    <div data-key="k2" ></div>
</div>

var model = {
    k1:  'Some text',
    k2:  'Some Div'
};
DataBind.bind( $('#id1'), model );

Seems like the data-key definitions are repetitive (though easier to listen for changes too). What if you just looked at the node values to see if they matched the model keys?

<div id="id1">
    <div>
        <textarea rows="5" cols="30">k1</textarea>    
    </div>
    <div>k2</div>
</div>

var model = {
    k1:  'Some text',
    k2:  'Some Div'
};
DataBind.bind( $('#id1'), model );

Binding to non-input elements like<span data-key="model"></span> or <div data-key="example"></div> doesn't work in firefox. Works in chrome and IE. Binding to <input /> seems to work fine though...

Hello, I understand the binding where when I change the DOM element value it changes the model. But when I change the model from some other javascript function, it doesn't trigger update on the element that is binded to it. Is there a way that I can change model directly and expect automatic update on the element? Thanks in advance

What if I have two (or more) exclusive "radio" buttons?

Your sample has only a single (useless I'm afraid) radiobutton which is always "on", what happens if I have more buttons with the same name (in order to make them mutually exclusive).

Using jquery you should write something like $('input[name="XYZ"]:checked').val() in order to get the value of the checked one.

I know this is on the potential 'upcoming' features list but thought I'd raise and issue just so it's noted somewhere that users are very much interested in IE8 support.

Which is the best way to bind to a select object? i.e. make one of the available options "selected"