Add dojo/watch and dojo/on script types to parser

[Kitson Kelly]

The attached patch and test adds the ability to specify "dojo.on" and "widget.watch" capabilities via the parser by extending the existing dojoML to specify functions to attach.

The following code snippet provides an example:

<button data-dojo-type="dijit.form.Button" id="b1">Click Me!
  <script type="dojo/on" data-dojo-event="click" data-dojo-args="e">
    console.log("on.click");
    dijit.byId("tb1").set("value","New Value");
  </script>
</button>
<div data-dojo-type="dijit.form.TextBox" id="tb1" data-dojo-props="value:'Something'">
  <script type="dojo/watch" data-dojo-prop="value" data-dojo-args="prop,oldValue,newValue">
    console.log("tb1." + prop + " changed from '" + oldValue + "' to '" + newValue + "'"); 
  </script>
</div>

[Kitson Kelly]

Patch adding dojo/watch and dojo/on script types

[Kitson Kelly]

An example of the functions working

[bill]

Thanks. For some reason your name isn't showing up in the ​CLA list, are you or your company covered? I might have asked this before.

Also, could you add this to the parser unit tests (ie, automated tests)? Can't check in anything w/out automated tests. Thanks!

[Kitson Kelly]

Yes, I have a CCLA filed under "Asseverate Limited" for at least a year now. I should just execute an individual CLA.

I am attaching a patch to the parser.html test that checks you can do dojo/watch and dojo/on.

[Kitson Kelly]

Patch to the Unit Test File

[bill]

Thanks, I updated our CLA list to have your name next to Asseverate Limited, no need for filing the individual CLA.

About the unit test, I just don't understand this part:

doh.t(typeof objOnWatch == "object");
objOnWatch.strProp1 = "newValue1";
doh.is("newValue1", objOnWatch.arrProp.newValue, "ensures watch executed");

Don't you need to call objOnWatch.set("strProp1", "newValue1") in order to trigger the watch?

[Kitson Kelly]

I think Kris wrote dojo.watch in a way that it can watch DOM node attributes and object properties directly (it is far more magical than I ever envisioned). So, I don't think he hooks .set() unless it is there. Because the "tests.parser.Class1" that I used in the unit test doesn't inherit for dojo.Stateful, the getter and setters aren't set, so I couldn't use .set (I tried it but then realised my problem).

Because I was trying to make the least amount of change to the unit test file, and dojo.Stateful wasn't required, and none of the declared test classes used it, I figured it best not to add it. When I tried direct manipulation of the property (like some of the other test units), watch() fired and I figured that was good enough.

I can change it to pull in dojo.Stateful and create a class and watch that one if that is better.

[Kitson Kelly]

Hmmm... I just took a look at it... .watch is declared in dojo.Stateful. I am at a loss to how the test case works, other than the fact that it does, at least on Firefox. When the parser does instance.watch("strProp1", fn) it doesn't throw an error and then when you directly change the property, the function actually fires. How does it work? It shouldn't have.

Now I am totally confused...

[Kitson Kelly]

Ok, I don't know how it worked before, but I pulled dojo.Stateful into the test case, declared a new class that inherits from Stateful and then did it via .set(). I have now attached a different patch for the unit test.

[Kitson Kelly]

Updated parser.html using dojo.Stateful for .set()

[bill]

Thanks, that looks good, I'll check this in, maybe you could update the documentation on docs.dojocampus.org (the release notes for 1.7 plus wherever we have general documentation about <script type="dojo/connect">)?

(I don't know how the old code was working either but I suspect it's because FF supports watch() natively)

[bill]

(In [25942]) Add dojo/watch and dojo/on script types to parser. Patch from kitsonk (CCLA on file), thanks! Fixes #13515 !strict.