gwendall / way.js Goto Github PK

Simple, lightweight, persistent two-way databinding

JavaScript 100.00%

way.js's Issues

self._bindings["all"] required?

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>

Program Specific issue (Slow response)

Example

                    <div class="form-group">
                        <label class="col-sm-3">Quiz Title</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="QuizTitle" placeholder="Quiz Title" autocomplete="off">
                        </div>
                        <label class="col-sm-3">Quiz Description</label>
                        <div class="col-sm-9">

                            <textarea class="form-control" name="QuizDescription" placeholder="Quiz Description" autocomplete="off" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3">Quiz Picture</label>
                        <div class="col-sm-9">

                            <input type="text" class="form-control" name="picture" placeholder="Enter an image's URL to see magic"
                                autocomplete="off">
                            <img class="img-responsive" way-data="formData.picture"
                                way-default="http://creditworksusa.com/wp-content/uploads/2014/03/facebook-default-profile-photo.jpg">
                        </div>
                    </div>

                    <div class="single_result_wrapper" way-repeat="formData.Results" style="padding: 0px;">
                        <label>Results</label>
                        <div>
                            <div class="item-entry">
                                <input type="text" class="form-control" placeholder="Result Title"
                                    way-data="title" way-persistent>
                            </div>
                            <div class="single_result_inner">
                                <div class="result_image">
                                    <div class="upload_icon"></div>
                                    <div class="upload_text">Click to add Photo/Video</div>
                                </div>
                            </div>
                            <a href="#" way-action-remove="formData.Results.$$key" way-persistent>Remove</a>
                        </div>
                    </div>
                    <div class="form-group">

                        <div class="col-sm-9">
                            <a href="#" way-action-push="formData.Results" style="position: relative; top: 5px; left: 12px;">Add a Result</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3">Questions</label>
                        <div class="col-sm-9">
                            <a href="#" way-action-push="formData.Questions" style="position: relative; top: 5px; left: 12px;">Add Questions</a>
                        </div>
                    </div>
                    <div class="form-group" way-repeat="formData.Questions" style="padding: 0px;">
                        <label class="col-sm-3"></label>
                        <div class="col-sm-9">
                            <div class="item-entry">
                                <input type="text" class="form-control" placeholder="Question Title"
                                    way-data="title" way-persistent>
                            </div>


                            <label class="col-sm-3">Answers</label>
                            <div class="col-sm-9">
                                <a href="#" way-action-push="formData.Answers" style="position: relative; top: 5px; left: 12px;">Add an Answer</a>
                            </div>

                            <div way-repeat="formData.Answers" style="padding: 0px;">
                                <label class="col-sm-3"></label>
                                <div class="col-sm-9">
                                    <div class="item-entry">
                                        <input type="text" class="form-control" placeholder="Answer Title"
                                            way-data="title" way-persistent>


                                        <div way-scope-break="true" style="padding: 8px 0px 0px 8px; border-top: rgba(0, 0, 0, .1) solid thin; margin-top: 8px;">
                                            <div way-repeat="formData.Results">
                                                <span way-data="title"></span>
                                            </div>


                                        </div>
                                        <div way-repeat="formData.Results">

                                            <span style="margin-left: 10px; font-weight: bold;">Weightage</span>
                                            <label>
                                                <input type="radio" way-data="level" value="0" checked="checked">0

                                            </label>
                                            <label>
                                                <input type="radio" way-data="level" value=".25">.25

                                            </label>
                                            <label>
                                                <input type="radio" way-data="level" value=".5">.5

                                            </label>
                                            <label>
                                                <input type="radio" way-data="level" value=".75">.75

                                            </label>
                                            <label>
                                                <input type="radio" way-data="level" value="1">1

                                            </label>
                                        </div>
                                    </div>

                                </div>


                                <a href="#" way-action-remove="formData.Answers.$$key" way-persistent>Remove</a>
                            </div>

                        </div>
                    </div>
            </div>

        </div>
    </div>

    <div class="col-sm-6 col-fixed">

        <div class="alert bg-warning">
            This is the data stored in way.js

        <div class="btn btn-sm btn-default pull-right" style="position: relative; top: -5px;" way-clear way-persistent>
            Clear data      
        </div>
        </div>
        <pre way-data="__all__" way-json="true" way-default="{}"></pre>
    </div>
</div>

So this is code I am using in body tag so when I add new answer in Question it takes so much time. No idea why? Page become unresponsive sometimes.

watch method has a bug

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

if input type is hidden or other , setter can't work

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

The sample doesn't work the same between browsers

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.

tying to put a classname according to a node data , but it's not working , can you help me ?

Design decision question

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.*

awesome except 'way-repeat'!!

does anyone can fix it?

There seems to be a mistake, to help look at the

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！

...

How to do nested repeats?

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?

Why way-data instead of data-way?

Validates: data-way-stuff.

Does not validate: data-way-stuff.

How to bind an element attribute or className ?

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

for example :

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

Filter function

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?

Benchmarks / TodoMVC

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

Doesn't work while loading a template via EJS

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

just a question: what will be printed under this situation

<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.

Issues using way.js with jquery validate plugin

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.

input type email is not stored

bug ~ demo Add a skill

About "timeoutInput" questions

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.

the repeats are not suitable for table

Is there anyone can solve it? thanks

When restored data, watch has not been emitted

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?

Logo >> undefined

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

Can I binding data to a.href or other attribute

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>

toJSON & fromJSON not working as advertised

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.

Skills list in demo disappears.

Skills list disappears when any thing above is changed.

update server

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

null appearing in text fields

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!

Chrome autocomplete doesn't work

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?

way-data save multiple options of select

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 !!!!

Ability to change the wrapper tag

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".

Support CommonJS and AMD

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

Bug: input cursor is moving when it should not

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.

Nested repeats support

Git tags for the library versions

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!

unshift method needed

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.

Publish to Bower, NPM, and CDNJS

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

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

IE Support?

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

way.js doesn't work in Safari 7.0.6

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:

CMD + Backspace

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

Support with Select2: select values isn't being saved.

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

Thanks for the cool plugin :).

nojquery几个错误的地方

数组html需要join

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

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

转换类型

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

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

escapeHTML carsh if str is not "string"

    var escapeHTML = function(str) {
        return str ? str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;") : str;
    }

What event to watch for binding ?

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

Skills = `null` in demo

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

Cleanup watchers

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?

gwendall / way.js Goto Github PK

way.js's Issues

Example

Recommend Projects

Recommend Topics

Recommend Org