grnadav / databind Goto Github PK
View Code? Open in Web Editor NEWTwo way data binding, dependant on nothing, not opinionated
License: Other
Two way data binding, dependant on nothing, not opinionated
License: Other
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"
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.