I'm trying to bind the form to a json-object that is retrieved from a database, but it gives me errors.

So I tried to use the toJSON function to get an object that would have the correct format, to feed it back into the fromJSON function, but the toJSON function doesn't give me a JSON object as advertised in the documentation, but the html-code of the form.

Am I reading docs wrong? How can I bind data from a database to the form and the other way around?

Keep up the good work.

How can I replace text 'link-url' by data-binding?

way.set("link-text", "this is a link");
way.set("link-url", "http://this.is.a.url/");
<a href="link-url" way-data="link-text"></a>

I expects:

<a href="http://this.is.a.url" way-data="link-text">this is a link</a>

but actually it renders

<a href="link-url" way-data="link-text">this is a link</a>

I have some props in my object that are string (in the json text string) but type being reported as object. and contain null values. When bound to a textbox the word 'null' appears. Shouldn't it handle this and instead use an empty string when binding with textboxes?

I got around this by cleaning up the object prior to loading it into way.js using (jquery):

for (var property in obj) {
if (obj.hasOwnProperty(property) && $.isEmptyObject(obj[property]))
   obj[property] = '';
}
way.set("scope", obj);

I'm coming from angular data-binding and wanted a lightweight data-binding solution for my non-angular projects and this is exactly what i needed. Great work!

Commas seem to be added after every way-action-push; is this something we could toggle on or off? It's visible in the demo.

Cheers!

way.js seems to break jQuery validate plugin (http://jqueryvalidation.org/validate). It stops the validation plugin from processing more than the first required field. I don't have any more info atm.

This is more of an FYI.

I'd be interested to see benchmarks vs. other similar libraries, etc. or something on TodoMVC

I'd love to know how this compares to Knockout which is pretty much just for two-way data-binding too (without the persistence).

Line 68 and 69, ’this._watchers[item]‘ was wrong, please change to 'self._watchers[item]'.

Hi. The lib seems to work pretty wellbut I can't make it work when I load a template and put on the DOM

Reading the documentation, seems I need to call
way.registerBindings();

after load the HTML into the DIV

If I check the attributes in the console, all the attributes way-readonly="false", ... seems to be well configured but the divs are not automatically updated on the DOM changes.

If I put the HTML with no templates and I didn't use the registerBindings all seems to work well.

It's anything else needed to make this lib works after injecting HTML into a DIV?

Kind regards

It looks like when the chrome autocomplete fills out an input field, the associated way model is not updated. Is there a way around this, such as reloading/refreshing the way model and grab all the input values again?

hello there ! First, nice little helper lib you have here.

Then i have a little question ... i have an input text ( part of a way.repeat() ) that i populate/change value programmatically ... But it seems 'Way' doesn't update the json values when the input is updated.

What kind of event are you watching to trigger the refresh ? SO that i can trigger it myself whenever the value is updated !

Thanx a bunch

If someone with graphic design chops wants to help, would be cool to have a logo for this library!

There is _json.unshift existed, but no way.unshift provided.
I my project, I need one ul list with data bound, and new li object should be put on the top.
I tried reverse, but it didn't work on repeat data attribut.
Thanks a lot.

I run the sample code at windows. The browsers i use are firefox31 and chrome35.0.1916.153.

The sample can get the expected json result in chrome for the option "skills" while in firefox it just
come out to the wrong place, just the same level as "formData" in json result.

Not sure what happened but please have a check, thanks.

CMD + Backspace doesn't trigger data change in your demo. OSX 10.9.4, Chromium 36.0.1985.125

Is there anyone can solve it? thanks

is there any kind of method binding element's attribute or className?

for example :

<div way-attr-data="scope.hidden" way-attr-name="hidden" id="d" ></div>

when i set scope.hidden as true , element d.hidden= true;

I have some data as follow:

{
  formData: {
    foo: 'bar'
  }
}

and then I watch the property foo:

way.watch('formData.foo', function (foo) {
  //my code...
});

The watch has not been emitted after loaded page.
I found that the watchAll could be emitted, but I only want to watch a specific property, what should I do?

When I realized "check all" by jquery, some bad things happened, way.js unable to detect changes in the value of, so I can manually trigger "change" events, but "setTimeout" led to erroneous results.
My code:

<!--html-->
<input type="checkbox" data-checkAll="a1"/> Check All

<input type="checkbox" value="1" data-checkall-bind="a1" way-data="ids.1">
<input type="checkbox" value="2" data-checkall-bind="a1" way-data="ids.2">
<input type="checkbox" value="3" data-checkall-bind="a1" way-data="ids.3">

<!--javascript-->
<script>
    $("input[type=checkbox][data-checkAll]").on('click',function(e){
        var p = $(this).attr('data-checkAll');
        var checked = $(this).prop('checked');
        var items = $("input[type=checkbox][data-checkAll-bind='"+p+"']");
        items.prop('checked',checked);

        var evt = document.createEvent('Event');
        evt.initEvent('change',true,true);

        items.each(function(){
            this.dispatchEvent(evt);
        });
    });    
</script>

<!--console result-->
way.get('ids');//{3:3}

As you can see, I hope the result is "{1:1,2:2,3:3}".

Then I look at your code, found to be caused here：

var eventInputChange = function(e) {
    if (timeoutInput) { clearTimeout(timeoutInput); }
    timeoutInput = setTimeout(function() {
        var element = w.dom(e.target).get(0);
        way.dom(element).toStorage();
    }, way.options.timeout);
}

Because I was using code triggered, event interval is very, very small, so "clearTimeout" is continuously invoked.

Then I changed the code，look here:
keepeye@10047f5

I don't know if it will bring unexpected problems,but it works for me.

Hi! Could you add a tag of the current version 0.1.0 in the repository? It is necessary for proper work of the Bower.
Thanks in advance!

Using wayjs to save data in localStorage for selects which uses select2 known plugin isn't working,

Thanks for the cool plugin :).

1. 数组html需要join

w.dom(wrapper).html(items);

=>

w.dom(wrapper).html(items.join(""));

1. 转换类型

return str ? str.replace(/&/g, "&")....

=>

return str ? (str + "").replace(/&/g, "&")...

I can't seem to see it mentioned anywhere as to whether or not any versions of IE are supported, and I know how painful it can be to get it to do so! Just thought I'd check first :) Cheers

How can you label this as framework agnostic when it includes and depends on jQuery? That warning should be in the same line as the "include this one file" happy-doc in the README.

Hey,

What is the correct way to update the server when data is updated?
for example, I have an array of notifications with "dismiss" button that removes the item.
what is the right way to let the server know that the item is dismissed?

Very nice work!

Bnaya

Was there any reason you chose way-data as opposed to the html5 data-way variation? The latter of which would make it possible to access information through element.dataset.way.*

Please support CommonJS and AMD for clean module loading. (reference: https://github.com/umdjs/umd)

Dear, as I can be stored in the "way-data" a set of elements? I need to store in a select multiple options.???

generates the following structure:

way data

{
"requestFoundsTransports": {
"transports": [
{
"transport_participants": {
"[]": "20"
},
"transport_ammount": "1212",
"transport_details": "1ssssss"
}
]
}
}

and I need something like this:

way data

{
"requestFoundsTransports": {
"transports": [
{
"transport_participants": {
"[]": "20,21,23"
},
"transport_ammount": "1212",
"transport_details": "1ssssss"
}
]
}
}

or this way:

way data

{
"requestFoundsTransports": {
"transports": [
{
"transport_participants": {
"[0]": "20",
"[1]": "21",
"[2]": "22"
.......
},
"transport_ammount": "1212",
"transport_details": "1ssssss"
}
]
}
}

greeeeetings !!!!

Please publish this library to Bower, NPM, and CDNJS.

(Might be a good idea to take care of #16 before this issue)

In AngularJs, it has a functionality that allow you to specify the format function for data.
https://docs.angularjs.org/api/ng/filter

For instance,

{{myData | uppercase}}

If myData='aabbcc', the content will be displayed as 'AABBCC'.

Is it possible to add such similar feature?

Validates: data-way-stuff.

Does not validate: data-way-stuff.

Demos don't seem to be working in Safari 7, is it a known issue?

[Error] TypeError: 'undefined' is not a function (evaluating 'parent.matches(selector)')
    parent (way.js, line 1523)
    registerRepeats (way.js, line 417)
    registerDependencies (way.js, line 526)
    eventInit (way.js, line 1634)
    onreadystatechange (way.js, line 1556)
[Error] TypeError: 'undefined' is not a function (evaluating 'parent.matches(selector)')
    parent (way.js, line 1523)
    registerRepeats (way.js, line 417)
    registerDependencies (way.js, line 526)
    (anonymous function) (way.js, line 1607)

Works in Chrome 36, though:

I have this problem where I want to generate a bunch of for a As it currently stands, way.js is wrapping a around the repeated items which prevents it from working with sets of data intended to go into a

I'd suggest adding a wrappertag parameter of sorts allowing to customize the tag wrapping the repeated items, instead of being hard-coded to "div".

I’ve tested this on Chrome v36 on OS X 10.9 and Firefox v31 on OS X 10.9, and it seems that if I do not include an element bound to "__all__", I’ll get the error: Uncaught TypeError: Cannot read property 'forEach' of undefined where undefined here refers to self._bindings["__all__"]

To elaborate, this works fine:

<html>
<body>
  <form way-data="model" way-persistent="true">
    <input type="text" name="magic">
    <input type="radio" name="ultra" value="something something darkside">
    <input type="radio" name="ultra" value="something something brightside">
  </form>
  <div way-data="__all__" way-json="true"></div>

  <script src="way.bundle.js"></script>
</body>
</html>

But this will fail:

<html>
<body>
  <form way-data="model" way-persistent="true">
    <input type="text" name="magic">
    <input type="radio" name="ultra" value="something something darkside">
    <input type="radio" name="ultra" value="something something brightside">
  </form>
  <!-- <div way-data="__all__" way-json="true"></div> -->

  <script src="way.bundle.js"></script>
</body>
</html>

When I click on "add skill" in the demo I get a bunch of nulls. Tried on Firefox and Chrome.

Skills list disappears when any thing above is changed.

This location code is not to be rewritten into:

WAY.prototype.constructor = WAY;

Because my English is not good, so the expression may have inappropriate place！

As far as I can tell there is no documented way of cleaning up watchers. Usually in a single page app with controllers you'd like to be able to unwatch the data when the controller is destroyed. This way you avoid generating unnecessary overhead. If the watcher can't be cleaned up, a reference to that function has to stay in memory and the whole controller will never be destroyed and garbage collected. Angular solves this by returning a function that can be called to automatically unwatch that function.

Any thoughts on this?

code:

<input type="hidden" name="ids" value="" way-data="ids" way-html="false" way-readonly="false" way-writeonly="false" way-persistent="false">

suggest:
see here

I have json like

 { "services": {
        "java": {
            "package": ["java6", "java7", "java8"],
            "type": ["local", "remote"]
        },
       "php": {
            "package": ["php5-cli", "php5-fpm"],
            "type": ["local", "remote"]
        }
    }
} 

And I want to do somethink like:

 <div way-repeat="services">
         $$key
         <div way-repeat="services.package">$$key</div>                  
 </div>

And nesting can be deeper
Is it possible?

does anyone can fix it?

I was checking out the demo and found a bug. When you're trying to add text not tothe end of the text filed, it switches focus to the end, forcing input to occur at the end.

Steps:
First I write something in the Name field, it works. Then I want to write something to the same field, this time not to the end of it, but to the begging (or in the middle). I can type one symbol where I want it to be, but after that input cursor is moved to the end of the exising string and any successive symbols go to the end.

<div way-scope="someScope1">
    <div way-scope-break="true">
        <div way-data="someScope1.with.something"></div>
        <!-- Will render "hello" -->
    </div>
</div>
<script>
way.set("someScope1", {
    with: {
        something: "hello "
    }
})
</script>

I'm a little puzzled with this feature 'way-scope-break'.
I understand it this way that it will render nothing.