Skip to content

Some changes to allow scoped overrides and direct use of template functions #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fmarsoni wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Some changes to allow scoped overrides and direct use of template functions #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions specs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jasmine Test Runner</title>
<link href="../../jasmine/lib/jasmine.css" rel="stylesheet"/>
<script src="../../jasmine/lib/jasmine.js"></script>
<script src="../../jasmine/lib/jasmine-html.js"></script>
<title>Jasmine Test Runner</title>
<link href="../../jasmine/lib/jasmine-core/jasmine.css" rel="stylesheet"/>
<script src="../../jasmine/lib/jasmine-core/jasmine.js"></script>
<script src="../../jasmine/lib/jasmine-core/jasmine-html.js"></script>

<!--SOURCE-->
<script src="../src/Jaml.js"></script>
<script src="../src/Node.js"></script>
<script src="../src/Template.js"></script>

<script>
function require() {
//do nothing for now. this makes the web-based test run work
//consider using modulr in the future
//https://github.com/codespeaks/modulr
}
</script

<!--TEST-->
<script src="node_spec.js"></script>
<script src="template_spec.js"></script>
Expand Down
54 changes: 38 additions & 16 deletions specs/jaml_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ describe("Jaml (top-level)", function() {
beforeEach(function(){
Jaml.templates = {};
})

describe("you can register a template and then use it to render", function() {
it("works with no data passed in (very simple)", function(){
Jaml.register("color", function(){
Expand All @@ -14,11 +14,11 @@ describe("Jaml (top-level)", function() {
li("green")
)
});

expect(Jaml.render("color")).
toEqual("<ul>\n" +
" <li>red</li>\n" +
" <li>green</li>\n" +
" <li>green</li>\n" +
"</ul>\n");
});

Expand All @@ -29,11 +29,11 @@ describe("Jaml (top-level)", function() {
li(widget.secondaryColor)
)
});

expect(Jaml.render("color", {primaryColor:"red", secondaryColor:"green"} )).
toEqual("<ul>\n" +
" <li>red</li>\n" +
" <li>green</li>\n" +
" <li>green</li>\n" +
"</ul>\n");
});

Expand All @@ -44,40 +44,62 @@ describe("Jaml (top-level)", function() {
li(widget.secondaryColor)
)
});

Jaml.register("shape", function(widget){
p(widget.shape)
});

var christmasTree = {primaryColor:"red", secondaryColor:"green", shape:"round"};

expect(Jaml.render("color", christmasTree )).
toEqual("<ul>\n" +
" <li>red</li>\n" +
" <li>green</li>\n" +
" <li>green</li>\n" +
"</ul>\n");

expect(Jaml.render("shape", christmasTree )).
toEqual("<p>round</p>\n");
toEqual("<p>round</p>\n");
});

it("can override a template by using the same name", function(){
var christmasTree = {shape:"round"};

Jaml.register("shape", function(widget){
p(widget.shape)
});
expect(Jaml.render("shape", christmasTree )).
toEqual("<p>round</p>\n");

Jaml.register("shape", function(widget){
div(widget.shape)
});
expect(Jaml.render("shape", christmasTree )).
toEqual("<div>round</div>\n");

});

});



it("can use a template without registering it", function() {
var christmasTree = {shape:"round"};
expect(Jaml.render(function(widget){
p(widget.shape)
}, christmasTree )).
toEqual("<p>round</p>\n");
});

it("can override templates without registering them", function() {
var christmasTree = {shape:"round"};
expect(Jaml.render({
shape: function(widget){
p(widget.shape)
},
div: function(widget){
div(render('shape', widget))
}
}, "div", christmasTree )).
toEqual("<div><p>round</p>\n</div>\n");
});
});
});

46 changes: 23 additions & 23 deletions specs/template_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
require("./spec_helper.js");

describe("Jaml.Template", function() {

describe("all html tags", function() {
it("a giant integration test for all html tags, so we see what we're allowing." +
" intentionally locating this at the top of this spec file.", function(){
" intentionally locating this at the top of this spec file.", function(){
expect(new Jaml.Template(function(){
html(
head(
Expand All @@ -17,7 +17,7 @@ describe("Jaml.Template", function() {
thead(tr(th())),
tfoot(tr(td())),
tbody(tr(td()))

),
ul(li(), ol()),
dl(), dt(), dd(),
Expand All @@ -32,7 +32,7 @@ describe("Jaml.Template", function() {
)
)
)
}).render()).
})._render()).
toEqual("<html>\n" +
" <head>\n" +
" <meta/>\n <script></script>\n <title/>\n <link/>\n" +
Expand Down Expand Up @@ -62,60 +62,60 @@ describe("Jaml.Template", function() {
"</html>\n");
});
});

describe("basic", function() {
it("renders", function(){
expect(new Jaml.Template(function(){
ul(
li("red"),
li("green")
)
}).render()).
})._render()).
toEqual("<ul>\n" +
" <li>red</li>\n" +
" <li>green</li>\n" +
" <li>green</li>\n" +
"</ul>\n");
});

it("renders with data", function(){
var theWidget = {primaryColor: "red", secondaryColor: "green"}

expect(new Jaml.Template(function(widget){
ul(
li(widget.primaryColor),
li(widget.secondaryColor)
)
}).render(theWidget)).
})._render(theWidget)).
toEqual("<ul>\n" +
" <li>red</li>\n" +
" <li>green</li>\n" +
" <li>green</li>\n" +
"</ul>\n");
});
});
});

describe("array data", function() {
it("renders the template for each item in the array", function(){
expect(new Jaml.Template(function(widget, i){
ul({id: i},
li(widget.primaryColor),
li(widget.secondaryColor)
)
}).render([
})._render([
{primaryColor: "red", secondaryColor: "green"},
{primaryColor: "orange", secondaryColor: "blue"},
{primaryColor: "yellow", secondaryColor: "purple"}
])).
toEqual("<ul id=\"0\">\n" +
" <li>red</li>\n" +
" <li>green</li>\n" +
" <li>green</li>\n" +
"</ul>\n" +
"<ul id=\"1\">\n" +
" <li>orange</li>\n" +
" <li>blue</li>\n" +
" <li>blue</li>\n" +
"</ul>\n" +
"<ul id=\"2\">\n" +
" <li>yellow</li>\n" +
" <li>purple</li>\n" +
" <li>purple</li>\n" +
"</ul>\n");
});
it("renders the template for each item in the array, using thisObj", function(){
Expand All @@ -124,26 +124,26 @@ describe("Jaml.Template", function() {
li(widget.primaryColor),
li(widget.secondaryColor)
)
}).render({data: "test"}, [
})._render({data: "test"}, [
{primaryColor: "red", secondaryColor: "green"},
{primaryColor: "orange", secondaryColor: "blue"},
{primaryColor: "yellow", secondaryColor: "purple"}
])).
toEqual("<ul data=\"test\" id=\"0\">\n" +
" <li>red</li>\n" +
" <li>green</li>\n" +
" <li>green</li>\n" +
"</ul>\n" +
"<ul data=\"test\" id=\"1\">\n" +
" <li>orange</li>\n" +
" <li>blue</li>\n" +
" <li>blue</li>\n" +
"</ul>\n" +
"<ul data=\"test\" id=\"2\">\n" +
" <li>yellow</li>\n" +
" <li>purple</li>\n" +
" <li>purple</li>\n" +
"</ul>\n");
});
});


});

31 changes: 25 additions & 6 deletions src/Jaml.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,18 @@
* Introduction: http://edspencer.net/2009/11/jaml-beautiful-html-generation-for-javascript.html
*/
Jaml = function() {
var merge = function() {
var obj = {};
for(var x=0;x<arguments.length;x++) {
for(var name in arguments[x])
obj[name] = arguments[x][name];
}
return obj;
}

return {
templates: {},

/**
* Registers a template by name
* @param {String} name The name of the template
Expand All @@ -17,17 +26,27 @@ Jaml = function() {
register: function(name, template) {
this.templates[name] = template;
},

/**
* Renders the given template name with an optional data object
* @param {String} name The name of the template to render
* @param {Object} thisObj Optional data object
* @param {Object} data Optional data object
*/
render: function(name, thisObj, data) {
var template = this.templates[name],
renderer = new Jaml.Template(template);
return renderer.render.apply(renderer, Array.prototype.slice.call(arguments, 1));
render: function(templates, name, thisObj, data) {
var tmpls, args;
if(typeof templates === 'object') {
tmpls = merge(this.templates, templates);
args = Array.prototype.slice.call(arguments, 1);
}
else {
args = arguments;
tmpls = this.templates;
}

var template = typeof args[0] === 'function' ? args[0] : tmpls[args[0]],
renderer = new Jaml.Template(template, tmpls);
return renderer._render.apply(renderer, Array.prototype.slice.call(args, 1));
}
};
}();
Loading