Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Fixing bugs around id generation and dojo-attach-points on parent node.

  • Loading branch information...
commit b38cb7c9d5624a39016b6dcb4d5021bab255a689 1 parent d00be78
James Thomas authored
View
18 public/js/server_side/_TemplatedMixin.js
@@ -1,10 +1,11 @@
define(["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin"], function (declare, _WidgetBase, _TemplatedMixin) {
- var old = _TemplatedMixin.prototype.buildRendering;
+ var br = _TemplatedMixin.prototype.buildRendering,
+ fc = _TemplatedMixin.prototype._fillContent;
_TemplatedMixin.prototype.buildRendering = function () {
if (!this.serverSide) {
- return old.call(this);
+ return br.call(this);
}
var node = this.srcNodeRef;
@@ -22,9 +23,18 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin"], fun
this._attachTemplateNodes(node, function(n,p){ return n.getAttribute(p); });
this._beforeFillContent(); // hook for _WidgetsInTemplateMixin
- };
+ // Don't pass srcRefNode reference as it doesn't exist.
+ this._fillContent();
+ };
+ // Override to turn into a no-op, we don't want to attach source
+ // ref nodes client side as it's been done on the server.
+ _TemplatedMixin.prototype._fillContent = function () {
+ if (!this.serverSide) {
+ return fc.apply(this, arguments);
+ }
+ };
return declare(null, {
@@ -43,7 +53,7 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin"], fun
// DFS to find nodes which don't have an associated dojo-type, don't descend
// into children of these.
- var current = rootNode.firstChild, nodes = [];
+ var current = rootNode.firstChild, nodes = [rootNode];
while(current && current !== rootNode) {
// Ignore any nodes that are declarative widgets or text nodes.
View
19 public/js/server_side/parser.js
@@ -408,10 +408,29 @@ define(
extra = extra || {};
extra.id = instance.id
+ // Nasty hack to simulate "instanceof" using dojo/declare's
+ // declaredClass name. We don't want to pull in the entire dijit
+ // package just to compare instances...
+ var declared_class = function (instance, name) {
+ while (instance) {
+ if (instance.declaredClass === name) return true;
+ instance = instance.__proto__;
+ }
+ }
+
+ // Edge-case for widgets inheriting from _FormSelectWidget,
+ // pass constructed options as direct parameter, original source
+ // reference nodes won't exist.
+ if (declared_class(instance, "dijit.form._FormSelectWidget")) {
+ extra.options = instance.options;
+ extra.options._parent = null;
+ }
+
// Render constructed widget properties back to a JSON string.
var json_props = djson.toJson(extra),
snipped = json_props.substr(1, json_props.length - 2);
+
// Add data-dojo-props back onto the widget, used to push attrs back into
// widgets when rendered client-side.
instance.domNode.setAttribute("data-dojo-props", snipped);
View
3  public/js/server_side/registry.js
@@ -8,10 +8,11 @@ define(["dijit/registry", "dojo/_base/lang", "dijit/main"], function (registry,
getUniqueId: function(/*String*/widgetType){
// summary:
// Generates a unique id for a given widgetType
+ // Add "ss" flag to ensure generated ids don't clash
var id;
do{
- id = widgetType + "_" +
+ id = widgetType + "_ss_" +
(widgetType in this._widgetTypeCtr ?
++this._widgetTypeCtr[widgetType] : this._widgetTypeCtr[widgetType] = 0);
}while(this._hash[id]);
View
2  public/js/server_side/sample.html
@@ -1,4 +1,4 @@
-<div>
+<div data-dojo-attach-point="hello">
<button data-dojo-attach-event="onClick:click" data-dojo-attach-point="btn" data-dojo-mixins="server_side/_TemplatedMixin" data-dojo-type="dijit/form/Button" data-dojo-props="label:'Inner button'"></button>
<button data-dojo-type="dijit/form/Button" data-dojo-props="label:'Inner button'"></button>
<button data-dojo-type="dijit/form/Button" data-dojo-props="label:'Inner button'"></button>
View
3  public/js/server_side/sample.js
@@ -1,4 +1,5 @@
-define(["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin", "dojo/text!./sample.html"],
+define(["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
+ "dojo/text!./sample.html", "dijit/form/Button"],
function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template) {
return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: template,
View
65 test/public/custom_widget.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Server Side Dijit</title>
+ <script>
+ var dojoConfig = {
+ paths: {
+ server_side: "/server_side"
+ },
+ async: true
+ };
+ </script>
+
+ <script src="/dojo/dojo/dojo.js">
+ </script>
+ <script>
+ require(["dojo/parser", "dojo/dom"], function (parser, dom) {
+ parser.parse(dom.byId("parser"));
+ });
+
+ </script>
+ <link rel="stylesheet" type="text/css" href="/dojo/dijit/themes/claro/claro.css">
+ <style>
+
+ #parse {
+ width: 800px;
+ margin: 0 auto;
+ }
+
+ .server_side {
+ float: left;
+ }
+
+ .client_side {
+ float: right;
+ }
+
+ label {
+ display: block;
+ margin: 10px 0px 5px 0px;
+ }
+
+ p {
+ font-style: italic;
+ }
+
+ .dijitbutton {
+ display: block;
+ margin: 10px 0;
+ }
+
+ .dijitslider {
+ width: 250px;
+ }
+ </style>
+ </head>
+ <body class="claro">
+ <div id="parse">
+ <div class="server_side">
+ <p>Server Side:</p>
+ <div data-dojo-type="server_side/sample" data-dojo-mixins="server_side/_TemplatedMixin"></div>
+ </div>
+ </div>
+ </body>
+</html>
View
31 test/public/dijit_calendar_lite.html
@@ -58,42 +58,11 @@
<div id="parse">
<div class="server_side">
<p>Server Side:</p>
-
- <!--
- <label>Input field with placeholder:</label>
- <input data-dojo-props="placeholder:'Placeholder text'" data-dojo-type='dijit/form/TextBox' data-dojo-mixins="server_side/_TemplatedMixin">
- <label>Input field with pre-specified value:</label>
- <input data-dojo-props="value:'Pre-specified value'" data-dojo-type='dijit/form/TextBox' data-dojo-mixins="server_side/_TemplatedMixin">
- <label>Checked radio button:</label>
- <input type="radio" data-dojo-type="dijit/form/CheckBox" data-dojo-props="checked: true" data-dojo-mixins="server_side/_TemplatedMixin">
- <label>Drop down list:</label>
- <div data-dojo-type="dijit/form/HorizontalSlider" data-dojo-mixins="server_side/_TemplatedMixin" data-dojo-mixins="server_side/_TemplatedMixin">
- </div>
- <label>Sample Button:</label>
- <button data-dojo-type="dijit/form/Button" data-dojo-props="label:'Sample Button'" data-dojo-mixins="server_side/_TemplatedMixin"></button>
- -->
<div data-dojo-type="dijit/CalendarLite" data-dojo-mixins="server_side/_TemplatedMixin"></div>
</div>
<div class="client_side">
<p>Client Side:</p>
-
- <!--
- <label>Input field with placeholder:</label>
- <input data-dojo-props="placeholder:'Placeholder text'" data-dojo-type='dijit/form/TextBox'>
- <label>Input field with pre-specified value:</label>
- <input data-dojo-props="value:'Pre-specified value'" data-dojo-type='dijit/form/TextBox'>
- <label>Checked radio button:</label>
- <input type="radio" data-dojo-type="dijit/form/CheckBox" data-dojo-props="checked: true">
- <label>Drop down list:</label>
- <div data-dojo-type="dijit/form/HorizontalSlider">
- </div>
- <label>Sample Button:</label>
- <button data-dojo-type="dijit/form/Button" data-dojo-props="label:'Sample Button'"></button>
- <div data-dojo-type="server_side/sample" data-dojo-mixins="server_side/_TemplatedMixin"></div>
- -->
-
<div data-dojo-type="dijit/CalendarLite"></div>
-
</div>
</div>
</body>
View
105 test/public/dijit_form_elements.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Server Side Dijit</title>
+ <script>
+ var dojoConfig = {
+ paths: {
+ server_side: "/server_side"
+ },
+ async: true
+ };
+ </script>
+
+ <script src="/dojo/dojo/dojo.js">
+ </script>
+ <script>
+ require(["dojo/parser", "dojo/dom"], function (parser, dom) {
+ parser.parse(dom.byId("parser"));
+ });
+
+ </script>
+ <link rel="stylesheet" type="text/css" href="/dojo/dijit/themes/claro/claro.css">
+ <style>
+
+ #parse {
+ width: 800px;
+ margin: 0 auto;
+ }
+
+ .server_side {
+ float: left;
+ }
+
+ .client_side {
+ float: right;
+ }
+
+ label {
+ display: block;
+ margin: 10px 0px 5px 0px;
+ }
+
+ p {
+ font-style: italic;
+ }
+
+ .dijitbutton {
+ display: block;
+ margin: 10px 0;
+ }
+
+ .dijitslider {
+ width: 250px;
+ }
+ </style>
+ </head>
+ <body class="claro">
+ <div id="parse">
+ <div class="server_side">
+ <p>Server Side:</p>
+ <label>Input field with placeholder:</label>
+ <input data-dojo-props="placeholder:'Placeholder text'" data-dojo-type='dijit/form/TextBox' data-dojo-mixins="server_side/_TemplatedMixin">
+ <label>Input field with pre-specified value:</label>
+ <input data-dojo-props="value:'Pre-specified value'" data-dojo-type='dijit/form/TextBox' data-dojo-mixins="server_side/_TemplatedMixin">
+ <label>Checked radio button:</label>
+ <input type="radio" data-dojo-type="dijit/form/CheckBox" data-dojo-props="checked: true" data-dojo-mixins="server_side/_TemplatedMixin">
+ <label>Horizontal Slider:</label>
+ <div data-dojo-type="dijit/form/HorizontalSlider" data-dojo-mixins="server_side/_TemplatedMixin" data-dojo-mixins="server_side/_TemplatedMixin">
+ </div>
+ <label>Sample Button:</label>
+ <button data-dojo-type="dijit/form/Button" data-dojo-props="label:'Sample Button'" data-dojo-mixins="server_side/_TemplatedMixin"></button>
+ <label>Drop-down List:</label>
+ <select name="select_ss" data-dojo-mixins="server_side/_TemplatedMixin" data-dojo-type="dijit/form/Select">
+ <option value="TN">Tennessee</option>
+ <option value="VA" selected="selected">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="FL">Florida</option>
+ <option value="CA">California</option>
+ </select>
+ </div>
+ <div class="client_side">
+ <p>Client Side:</p>
+ <label>Input field with placeholder:</label>
+ <input data-dojo-props="placeholder:'Placeholder text'" data-dojo-type='dijit/form/TextBox'>
+ <label>Input field with pre-specified value:</label>
+ <input data-dojo-props="value:'Pre-specified value'" data-dojo-type='dijit/form/TextBox'>
+ <label>Checked radio button:</label>
+ <input type="radio" data-dojo-type="dijit/form/CheckBox" data-dojo-props="checked: true">
+ <label>Horizontal Slider:</label>
+ <div data-dojo-type="dijit/form/HorizontalSlider">
+ </div>
+ <label>Sample Button:</label>
+ <button data-dojo-type="dijit/form/Button" data-dojo-props="label:'Sample Button'"></button>
+ <label>Drop-down List:</label>
+ <select name="select_client" data-dojo-type="dijit/form/Select">
+ <option value="TN">Tennessee</option>
+ <option value="VA" selected="selected">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="FL">Florida</option>
+ <option value="CA">California</option>
+ </select>
+ </div>
+ </div>
+ </body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.