source: Dev/trunk/src/client/dijit/tests/_AttachMixin.html @ 532

Last change on this file since 532 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 5.9 KB
Line 
1<!DOCTYPE html>
2<html>
3        <head>
4                <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5                <title>_AttachMixin Test</title>
6
7                <script src="boilerplate.js"></script>
8
9                <style type="text/css">
10                        /* Make our tests stand out as easily identifiable content */
11                        .testcontainer {
12                                border: 10px yellow;
13                                border-style: dashed;
14                                padding: 1em;
15                                margin: 1em;
16                        }
17                        .testcontainer > p {
18                                padding: 0 1em;
19                                font-weight: bold;
20                        }
21                </style>
22
23                <script type="text/javascript">
24                        require([
25                                "doh/runner", "dojo/_base/declare", "dojo/dom", "dojo/html", "dojo/on", "dojo/parser",
26                                "dijit/registry", "dijit/_WidgetBase", "dijit/_AttachMixin", "dijit/_TemplatedMixin",
27                                "dijit/form/Button", "dijit/Editor", "dojo/domReady!"
28                        ], function(doh, declare, dom, html, on, parser,
29                                registry, _WidgetBase, _AttachMixin, _TemplatedMixin, Button, Editor) {
30
31                                doh.register("_AttachMixin", [
32                                        function basic() {
33                                               
34                                                /*** TEST _AttachMixin on a simple _WidgetBase ***/
35                                                var WidgetWithAttachMagic = declare([ _WidgetBase, _AttachMixin ], {
36                                                        postCreate: function() {
37                                                                html.set(this.heading, "I am an attach point, hear me raar!");
38                                                                this.field.value = "Value is objective.";
39                                                        },
40                                                        _fieldChanged: function(e) {
41                                                                html.set(this.heading, "Oooh! Saucy! Now I am '" + e.target.value + "'");
42                                                        }
43                                                });
44
45                                                var mydijit = new WidgetWithAttachMagic({}, dom.byId("attachMe"));
46                                                mydijit.startup();
47                                               
48                                                doh.t(mydijit.heading, "heading");
49                                                doh.t(mydijit.field, "field");
50                                                doh.is("I am an attach point, hear me raar!", mydijit.heading.innerHTML, "Initial value");
51                                               
52                                                // Simulate a change
53                                                mydijit.field.value = 'something new';
54                                                on.emit(mydijit.field, "keyup", {bubbles: true});
55                                               
56                                                doh.is("Oooh! Saucy! Now I am 'something new'", mydijit.heading.innerHTML, "Post-op value");
57                                        },
58
59                                        function attachScope() {
60                                                /*** Test an inner dijit's attach-point and attach-event behaviour being attached to a
61                                                 * different widget instance, in this case the outer one.
62                                                 */
63                                                var InnerDijit = declare([ _WidgetBase, _TemplatedMixin ], {
64                                                        declaredClass: "InnerDijit",    // for debugging
65                                                        templateString: "<div><input data-dojo-attach-point='field' data-dojo-attach-event='onkeyup: inputKeyUp'></div>"
66                                                });
67                                               
68                                                var OuterDijit = declare([ _WidgetBase, _TemplatedMixin ], {
69                                                        declaredClass: "OuterDijit",    // for debugging
70                                                        templateString:
71                                                                        "<div>" +
72                                                                                "<h2 data-dojo-attach-point='heading'>Initial value</h2>" +
73                                                                                "<div data-dojo-attach-point='content'></div>" +
74                                                                        "</div>",
75                                                        buildRendering: function() {
76                                                                this.inherited(arguments);
77                                                                this.iw = new InnerDijit({
78                                                                        attachScope: this // Cause attach points in inner dijit to attach to us
79                                                                });
80                                                                // NB don't own as we will do a destroy test later this.own(id);
81                                                                this.iw.placeAt(this.content, 'last');
82                                                        },
83                                                        // This handler is attached to the field in our inner dijit
84                                                        inputKeyUp: function(e) {
85                                                                var target = e.target;
86                                                                html.set(this.heading, "Event: " + e.type + " value: " + target.value);
87                                                        }
88                                                });
89                                               
90                                                var od = new OuterDijit({}, dom.byId('destthree'));
91                                                od.startup();
92
93                                                // Confirm that the outer dijit has attached points both
94                                                //  from its own template, and the inner dijit.
95                                                doh.t(od.heading, "heading");
96                                                doh.t(od.field, "field");
97                                                doh.is("Initial value", od.heading.innerHTML, "Initial value");
98                                               
99                                                // Simulate a change on the field in the inner dijit
100                                                od.field.value = 'something new';
101                                                on.emit(od.field, "keyup", {bubbles: true});
102                                               
103                                                // Confirm the change ran the event handler in the outer dijit
104                                                doh.is("Event: keyup value: something new", od.heading.innerHTML, "Post-op value");
105                                               
106                                                // Now destroy the inner dijit and ensure its attach points on the parent
107                                                //  were removed.
108                                                od.iw.destroy();
109                                                delete od.iw;
110                                                doh.t(od.heading, "heading remains"); // heading remains
111                                                doh.f(od.field, "inner content was detached");  // inner content was detached
112                                        },
113
114                                        function containerNode(){
115                                                // Test that code inside of containerNode isn't scanned
116                                                var WidgetWithAttachMagic = declare([ _WidgetBase, _AttachMixin ]);
117                                                var cd = new WidgetWithAttachMagic({}, dom.byId("attachMeFive"));
118                                                doh.t(cd.heading, "heading attach point set up");
119                                                doh.f("mybutton" in cd, "attach point inside containerNode ignored");
120                                        }
121                                ]);
122                               
123                                doh.run();
124                        });
125                </script>
126        </head>
127        <body class="claro">
128
129                <h1 class="testTitle">Dijit _AttachMixin Test</h1>
130
131                <div class="testcontainer">
132                        <p>This markup may have come from a server side templating engine like Catalyst.
133                        The aim is to allow us to use data-dojo-attach-* magic on the content.<br>
134                        Change the input value to see attach event and attach point at work.</p>
135                        <div id="attachMe">
136                                <h2 data-dojo-attach-point="heading"></h2>
137                                <label for="${id}_field">You say "Hello":</label>
138                                <input id="${id}_field" placeHolder="I say 'Goodbye'"
139                                           data-dojo-attach-point="field"
140                                           data-dojo-attach-event="onkeyup: _fieldChanged">
141                        </div>
142                </div>
143               
144                <div class="testcontainer">
145                        <p>This test shows an inner dijit being created with attachScope referencing its enclosing dijit.</p>
146                        <div id="destthree"></div>
147                </div>
148
149                <!-- Test that data-dojo-attach-point etc. inside containerNode are ignored -->
150                <div class="testcontainer">
151                        <p>This tests that nodes inside of data-dojo-attach-point="containerNode" are ignored<br>
152                        <div id="attachMeFive">
153                                <h2 data-dojo-attach-point='heading'></h2>
154                                <div data-dojo-attach-point='containerNode'>
155                                        <span data-dojo-type='AnotherAttachPointWidget'>
156                                                <button data-dojo-attach-point='mybutton'
157                                                        data-dojo-attach-event='onClick: _buttonClicked'>A button
158                                                </button>
159                                        </span>
160                                </div>
161                        </div>
162                </div>
163
164        </body>
165</html>
Note: See TracBrowser for help on using the repository browser.