Skip to content

Commit 6915066

Browse files
davidlgjdavidlgj
committed
Builder examples
1 parent 2e75bf7 commit 6915066

File tree

2 files changed

+130
-0
lines changed

2 files changed

+130
-0
lines changed

‎examples/builder.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html ng-app="builderExample">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Builder example</title>
6+
</head>
7+
<body>
8+
9+
<div custom-build></div>
10+
11+
<script src="../bower_components/angular/angular.js" charset="utf-8"></script>
12+
<script src="../dist/schema-form.js" charset="utf-8"></script>
13+
<script src="../bower_components/objectpath/lib/ObjectPath.js"></script>
14+
15+
<script type="text/javascript">
16+
angular.module('builderExample', ['schemaForm'])
17+
.run(function($templateCache) {
18+
// A template to use
19+
$templateCache.put('example-template.html', '<h1>Hello {{world}}</h1>');
20+
})
21+
.directive('customBuild', function($compile, sfBuilder) {
22+
return {
23+
link: function(scope, element, attrs) {
24+
scope.world = 'World';
25+
26+
// First a "canonical form definition", usually this is created by merging form
27+
// definition from user and a schema.
28+
var formDef = [
29+
{type: 'example'}
30+
];
31+
32+
// A decorator is just an object that matches form `type` to a metadata object
33+
// `replace` property is a boolean, if false the "old" way to build forms is
34+
// used for backwards compatability.
35+
// `builder` is a function or a list of helper functions to manipulate the DOM during the build.
36+
// For example to set proper ng-model value, or include child items
37+
var decorator = {
38+
example: {template: 'example-template.html', replace: true, builder: []}
39+
};
40+
41+
// The builder creates a nice document fragment for you to place in the form.
42+
var documentFragment = sfBuilder.build(formDef, decorator);
43+
44+
// Then plop the fragment into the element
45+
element[0].appendChild(documentFragment);
46+
47+
// It isn't compiled yet though, so let's do that.
48+
$compile(element.children())(scope);
49+
}
50+
};
51+
});
52+
53+
</script>
54+
</body>
55+
</html>

‎examples/builder2.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html ng-app="builderExample">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Builder example</title>
6+
</head>
7+
<body>
8+
9+
<div custom-build></div>
10+
11+
<script src="../bower_components/angular/angular.js" charset="utf-8"></script>
12+
<script src="../dist/schema-form.js" charset="utf-8"></script>
13+
<script src="../bower_components/objectpath/lib/ObjectPath.js"></script>
14+
15+
<script type="text/javascript">
16+
angular.module('builderExample', ['schemaForm'])
17+
.run(function($templateCache) {
18+
// A template to use
19+
$templateCache.put('example-template.html', '<h1>Hello {{world}}</h1>');
20+
$templateCache.put('fieldset-template.html', '<fieldset><legend>Legend</legend></fieldset>');
21+
})
22+
.directive('customBuild', function($compile, sfBuilder) {
23+
return {
24+
link: function(scope, element, attrs) {
25+
scope.world = 'World';
26+
27+
// First a "canonical form definition", usually this is created by merging form
28+
// definition from user and a schema.
29+
// This time its a nested structure with a fieldset around our example type
30+
var formDef = [
31+
{
32+
type: 'fieldset',
33+
items: [{type: 'example'}]
34+
}
35+
];
36+
37+
// A "builder", i.e. a helper function to get the fieldset to actually contain its
38+
// children.
39+
var fieldsetBuilder = function(args) {
40+
// The `args` options object contains lot's of useful stuff, the form definition,
41+
// the documentFragment of the current template, and a builder function to call
42+
// when recursively building children.
43+
44+
// We access the form definition through args.form, and we've put our children
45+
// under "items", so we call the builder recursively to build them.
46+
var children = args.build(args.form.items);
47+
48+
// What we get is documentFragment that we plop inside the fieldset.
49+
args.fieldFrag.firstChild.appendChild(children);
50+
};
51+
52+
// A decorator is just an object that matches form `type` to a metadata object
53+
// `replace` property is a boolean, if false the "old" way to build forms is
54+
// used for backwards compatability.
55+
// `builder` is a function or a list of helper functions to manipulate the DOM during the build.
56+
// For example to set proper ng-model value, or include child items
57+
var decorator = {
58+
example: {template: 'example-template.html', replace: true, builder: []},
59+
fieldset: {template: 'fieldset-template.html', replace: true, builder: fieldsetBuilder},
60+
};
61+
62+
// The builder creates a nice document fragment for you to place in the form.
63+
var documentFragment = sfBuilder.build(formDef, decorator);
64+
65+
// Then plop the fragment into the element
66+
element[0].appendChild(documentFragment);
67+
68+
// It isn't compiled yet though, so let's do that.
69+
$compile(element.children())(scope);
70+
}
71+
};
72+
});
73+
</script>
74+
</body>
75+
</html>

0 commit comments

Comments
 (0)