Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bind data back to form #7

Open
zevero opened this issue Nov 15, 2014 · 3 comments
Open

bind data back to form #7

zevero opened this issue Nov 15, 2014 · 3 comments
Assignees

Comments

@zevero
Copy link

zevero commented Nov 15, 2014

Hi, I like this simple plugin.

So I just do

$('form').databind(data);

and all changes to the form are happily reflected in data.

But now I want to add a clear button for the form. If I clear the data fields, nothing is happening to the forms and if I clear the form fields nothing is happening to the data fields.

So how can I clear input1? I am not happy with my current workaround:

data.input1= "";
$('#input1').val("");

It is clear that without polling or Object.observe(), a simple change in the data object can not be reflected. But is there some kind of trigger, so that I can tell the plugin that data has changed?

A simple val() change of a form field is not enough to change data...

Can you give me some advice?
Thank you!

@jdavidw13
Copy link
Owner

I'm glad you like it and are finding it, somewhat, useful. Currently, I
don't have a good solution for you, I haven't even looked at the code in
over a year. However, I will take a look at it again and get back to you
with something.

On Sat, Nov 15, 2014 at 4:55 AM, zevero notifications@github.com wrote:

Hi, I like this simple plugin.

So I just do

$('form').databind(data);

and all changes to the form are happily reflected in data.

But now I want to add a clear button for the form. If I clear the data
fields, nothing is happening to the forms and if I clear the form fields
nothing is happening to the data fields.

So how can I clear input1? I am not happy with my current workaround:

data.input1= "";
$('#input1').val("");

It is clear that without polling or Object.observe(), a simple change in
the data object can not be reflected. But is there some kind of trigger, so
that I can tell the plugin that data has changed?

A simple val() change of a form field is not enough to change data...

Can you give me some advice?
Thank you!


Reply to this email directly or view it on GitHub
#7.

@jdavidw13
Copy link
Owner

The plugin should now listen to the form reset event, and update the bound data accordingly. I added a simple test case for this under the tests, and it seems to be functioning correctly. Let me know if you run into any problems.

@jdavidw13 jdavidw13 self-assigned this Nov 16, 2014
@zevero
Copy link
Author

zevero commented Nov 18, 2014

Hi! Thank you for this great addition!

So I studied your code for quite a bit and found out, that I can change any field when I append .trigger('change'). But of course using the reset handler is even better.

I am using your plugin for an offline-capable single-page-application. Before I did some projects with angular, Backbone and Ember and I ended up writing quite complex plugins for all those frameworks.

So I made my own, dead-simple mimicing the modules/actions (like in symfony1) using page.js and (one-way) templating with dot.js.
A good folder structure and some conventions make it very easy to see what is going on.
A set of gulp tasks takes care to minify and uglyfy everything and to put it into a manifest.

So in the end, I just have a bunch of loosly coupled (self-contained) mini pages. Data is just sitting in closures, avoiding any heavy structures with state.
The model consists of some defined global objects, which are of course EVIL, but very easy to access.

I was just in need for an equally simple form-binding.

So I looked around and came across yours - which I like best and use currently, but I am still looking for something even easier.

  • I want to use id fields with a prefix and not the name porperty, since I already need them for my labels and I want to have a DRY structure throughout my "framework"
  • Second I want it to bind to a callback

So in the end, with the convention, that the id of the form-element is the root of the inputs I want to have a similar api to jquery.val():

data = $('form').multival(); //get (nested) data from form

this = $('form').multival(data); //set form with (nested) data
this = $('form').multival({});     //clear the form

this = $('form').multival(function(data, changedpath, changedval){ //watch form
    console.log(changedpath, 'changed_to', changedval);
});

Well the function needs three variables, since I can not simply do data[changedpath] on a nested structure. Maybe I dont need nesting anyway ...

This is - of course - something quite different to your project but might use a big portion of your code.

May I have your consent to use your code to build this mulitval plugin?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants