1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
//>>built
define("dojox/mvc/Generate", [
"dojo/_base/lang",
"dojo/_base/declare",
"./_Container",
"./Group",
"dijit/form/TextBox"
], function(lang, declare, Container){
/*=====
Container = dojox.mvc._Container;
declare = dojo.declare;
=====*/
return declare("dojox.mvc.Generate", [Container], {
// summary:
// A container that generates a view based on the data model its bound to.
//
// description:
// A generate introspects its data binding and creates a view contained in
// it that allows displaying the bound data. Child dijits or custom view
// components inside it inherit their parent data binding context from it.
// _counter: [private] Integer
// A count maintained internally to always generate predictable widget
// IDs in the view generated by this container.
_counter : 0,
// defaultWidgetMapping: Object
// The mapping of types to a widget class. Set widgetMapping to override this.
//
_defaultWidgetMapping: {"String" : "dijit.form.TextBox"},
// defaultClassMapping: Object
// The mapping of class to use. Set classMapping to override this.
//
_defaultClassMapping: {"Label" : "generate-label-cell", "String" : "generate-dijit-cell", "Heading" : "generate-heading", "Row" : "row"},
// defaultIdNameMapping: Object
// The mapping of id and name to use. Set idNameMapping to override this. A count will be added to the id and name
//
_defaultIdNameMapping: {"String" : "textbox_t"},
////////////////////// PRIVATE METHODS ////////////////////////
_updateBinding: function(){
// summary:
// Regenerate if the binding changes.
this.inherited(arguments);
this._buildContained();
},
_buildContained: function(){
// summary:
// Destroy any existing generated view, recreate it from scratch
// parse the new contents.
// tags:
// private
this._destroyBody();
this._counter = 0;
this.srcNodeRef.innerHTML = this._generateBody(this.get("binding"));
this._createBody();
},
_generateBody: function(binding, hideHeading){
// summary:
// Generate the markup for the view associated with this generate
// container.
// binding:
// The associated data binding to generate a view for.
// hideHeading:
// Whether the property name should be displayed as a heading.
// tags:
// private
var body = "";
for(var prop in binding){
if(binding[prop] && lang.isFunction(binding[prop].toPlainObject)){
if(binding[prop].get(0)){
body += this._generateRepeat(binding[prop], prop);
}else if(binding[prop].value){
// TODO: Data types based widgets
body += this._generateTextBox(prop);
}else{
body += this._generateGroup(binding[prop], prop, hideHeading);
}
}
}
return body;
},
_generateRepeat: function(binding, repeatHeading){
// summary:
// Generate a repeating model-bound view.
// binding:
// The bound node (a collection/array node) to generate a
// repeating UI/view for.
// repeatHeading:
// The heading to be used for this portion.
// tags:
// private
var headingClass = (this.classMapping && this.classMapping["Heading"]) ? this.classMapping["Heading"] : this._defaultClassMapping["Heading"];
var repeat = '<div data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: \'' + repeatHeading + '\'" + id="' + this.id + '_r' + this._counter++ + '">' +
'<div class="' + headingClass + '\">' + repeatHeading + '</div>';
repeat += this._generateBody(binding, true);
repeat += '</div>';
return repeat;
},
_generateGroup: function(binding, groupHeading, hideHeading){
// summary:
// Generate a hierarchical model-bound view.
// binding:
// The bound (intermediate) node to generate a hierarchical
// view portion for.
// groupHeading:
// The heading to be used for this portion.
// hideHeading:
// Whether the heading should be hidden for this portion.
// tags:
// private
var group = '<div data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: \'' + groupHeading + '\'" + id="' + this.id + '_g' + this._counter++ + '">';
if(!hideHeading){
var headingClass = (this.classMapping && this.classMapping["Heading"]) ? this.classMapping["Heading"] : this._defaultClassMapping["Heading"];
group += '<div class="' + headingClass + '\">' + groupHeading + '</div>';
}
group += this._generateBody(binding);
group += '</div>';
return group;
},
_generateTextBox: function(prop){
// summary:
// Produce a widget for a simple value.
// prop:
// The data model property name.
// tags:
// private
// TODO: Data type based widget generation / enhanced meta-data
var idname = this.idNameMapping ? this.idNameMapping["String"] : this._defaultIdNameMapping["String"];
idname = idname + this._counter++;
var widClass = this.widgetMapping ? this.widgetMapping["String"] : this._defaultWidgetMapping["String"];
var labelClass = (this.classMapping && this.classMapping["Label"]) ? this.classMapping["Label"] : this._defaultClassMapping["Label"];
var stringClass = (this.classMapping && this.classMapping["String"]) ? this.classMapping["String"] : this._defaultClassMapping["String"];
var rowClass = (this.classMapping && this.classMapping["Row"]) ? this.classMapping["Row"] : this._defaultClassMapping["Row"];
return '<div class="' + rowClass + '\">' +
'<label class="' + labelClass + '\">' + prop + ':</label>' +
'<input class="' + stringClass + '\" data-dojo-type="' + widClass + '\" data-dojo-props="name: \'' + idname + "', ref: '" + prop + '\'" id="' +
idname + '\"></input>' +
'</div>';
}
});
});
|
