Todos
15 | 16 |
41 |
8 | """
9 |
10 | data = [
11 | name: 'Foo'
12 | ,
13 | name: 'Bar'
14 | ]
15 |
16 | directives =
17 | name: text: (params) ->
18 | expect(data[params.index]).toEqual(params.element.transparency.model)
19 | @name
20 |
21 | template.render data, directives
22 |
23 | for li, i in template.find('li')
24 | for element in $(li).add('*', li)
25 | expect(data[i]).toEqual(element.transparency.model)
26 |
--------------------------------------------------------------------------------
/spec/modelReferencesSpec.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | describe("Each element in a template instance", function() {
3 | return it("should have reference to the rendered model", function() {
4 | var data, directives, element, i, j, len, li, ref, results, template;
5 | template = $("Double-click to edit a todo
42 |Written by Addy Osmani
43 |Part of TodoMVC
44 | 45 | 46 |
47 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/backbone/js/app.js:
--------------------------------------------------------------------------------
1 | $(function(){
2 |
3 | // Kick things off by creating the **App**.
4 | var App = new window.app.AppView;
5 |
6 | });
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/backbone/js/collections/todos.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | 'use strict';
3 |
4 | // Todo Collection
5 | // ---------------
6 |
7 | // The collection of todos is backed by *localStorage* instead of a remote
8 | // server.
9 | var TodoList = Backbone.Collection.extend({
10 |
11 | // Reference to this collection's model.
12 | model: window.app.Todo,
13 |
14 | // Save all of the todo items under the `"todos"` namespace.
15 | localStorage: new Store("todos-backbone"),
16 |
17 | // Filter down the list of all todo items that are finished.
18 | completed: function() {
19 | return this.filter(function(todo){ return todo.get('completed'); });
20 | },
21 |
22 | // Filter down the list to only todo items that are still not finished.
23 | remaining: function() {
24 | return this.without.apply(this, this.completed());
25 | },
26 |
27 | // We keep the Todos in sequential order, despite being saved by unordered
28 | // GUID in the database. This generates the next order number for new items.
29 | nextOrder: function() {
30 | if ( !this.length ){
31 | return 1;
32 | }
33 | return this.last().get('order') + 1;
34 | },
35 |
36 | // Todos are sorted by their original insertion order.
37 | comparator: function(todo) {
38 | return todo.get('order');
39 | }
40 | });
41 |
42 | // Create our global collection of **Todos**.
43 | window.app.Todos = new TodoList;
44 |
45 | })();
46 |
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/backbone/js/init.js:
--------------------------------------------------------------------------------
1 |
2 | // Constants
3 | var ENTER_KEY = 13;
4 |
5 | // Setup namespace for the app
6 | window.app = window.app || {};
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/backbone/js/lib/backbone-localstorage.js:
--------------------------------------------------------------------------------
1 | // A simple module to replace `Backbone.sync` with *localStorage*-based
2 | // persistence. Models are given GUIDS, and saved into a JSON object. Simple
3 | // as that.
4 |
5 | // Generate four random hex digits.
6 | function S4() {
7 | return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
8 | };
9 |
10 | // Generate a pseudo-GUID by concatenating random hexadecimal.
11 | function guid() {
12 | return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
13 | };
14 |
15 | // Our Store is represented by a single JS object in *localStorage*. Create it
16 | // with a meaningful name, like the name you'd give a table.
17 | var Store = function(name) {
18 | this.name = name;
19 | var store = localStorage.getItem(this.name);
20 | this.data = (store && JSON.parse(store)) || {};
21 | };
22 |
23 | _.extend(Store.prototype, {
24 |
25 | // Save the current state of the **Store** to *localStorage*.
26 | save: function() {
27 | localStorage.setItem(this.name, JSON.stringify(this.data));
28 | },
29 |
30 | // Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
31 | // have an id of it's own.
32 | create: function(model) {
33 | if (!model.id) model.id = model.attributes.id = guid();
34 | this.data[model.id] = model;
35 | this.save();
36 | return model;
37 | },
38 |
39 | // Update a model by replacing its copy in `this.data`.
40 | update: function(model) {
41 | this.data[model.id] = model;
42 | this.save();
43 | return model;
44 | },
45 |
46 | // Retrieve a model from `this.data` by id.
47 | find: function(model) {
48 | return this.data[model.id];
49 | },
50 |
51 | // Return the array of all models currently in storage.
52 | findAll: function() {
53 | return _.values(this.data);
54 | },
55 |
56 | // Delete a model from `this.data`, returning it.
57 | destroy: function(model) {
58 | delete this.data[model.id];
59 | this.save();
60 | return model;
61 | }
62 |
63 | });
64 |
65 | // Override `Backbone.sync` to use delegate to the model or collection's
66 | // *localStorage* property, which should be an instance of `Store`.
67 | Backbone.sync = function(method, model, options) {
68 |
69 | var resp;
70 | var store = model.localStorage || model.collection.localStorage;
71 |
72 | switch (method) {
73 | case "read": resp = model.id ? store.find(model) : store.findAll(); break;
74 | case "create": resp = store.create(model); break;
75 | case "update": resp = store.update(model); break;
76 | case "delete": resp = store.destroy(model); break;
77 | }
78 |
79 | if (resp) {
80 | options.success(resp);
81 | } else {
82 | options.error("Record not found");
83 | }
84 | };
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/backbone/js/models/todo.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | 'use strict';
3 |
4 | // Todo Model
5 | // ----------
6 |
7 | // Our basic **Todo** model has `title`, `order`, and `completed` attributes.
8 | window.app.Todo = Backbone.Model.extend({
9 |
10 | // Default attributes for the todo.
11 | defaults: {
12 | title: "empty todo...",
13 | completed: false
14 | },
15 |
16 | // Ensure that each todo created has `title`.
17 | initialize: function() {
18 | if (!this.get("title")) {
19 | this.set({"title": this.defaults.title});
20 | }
21 | },
22 |
23 | // Toggle the `completed` state of this todo item.
24 | toggle: function() {
25 | this.save({completed: !this.get("completed")});
26 | },
27 |
28 | // Remove this Todo from *localStorage* and delete its view.
29 | clear: function() {
30 | this.destroy();
31 | }
32 |
33 | });
34 |
35 |
36 | })();
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/backbone/js/routers/router.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | 'use strict';
3 |
4 | // Todo Router
5 | // ----------
6 |
7 | var Workspace = Backbone.Router.extend({
8 |
9 | routes:{
10 | "*filter": "setFilter"
11 | },
12 |
13 | setFilter: function(param){
14 |
15 | // Set the current filter to be used
16 | window.app.TodoFilter = param.trim() || "";
17 |
18 | // Trigger a collection reset/addAll
19 | window.app.Todos.trigger('reset');
20 | }
21 |
22 | });
23 |
24 | window.app.TodoRouter = new Workspace;
25 | Backbone.history.start();
26 |
27 | })();
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/backbone/js/views/app.js:
--------------------------------------------------------------------------------
1 | $(function( $ ) {
2 | 'use strict';
3 |
4 | // The Application
5 | // ---------------
6 |
7 | // Our overall **AppView** is the top-level piece of UI.
8 | window.app.AppView = Backbone.View.extend({
9 |
10 | // Instead of generating a new element, bind to the existing skeleton of
11 | // the App already present in the HTML.
12 | el: $("#todoapp"),
13 |
14 | // Our template for the line of statistics at the bottom of the app.
15 | statsTemplate: $('#stats-template'),
16 |
17 | // Delegated events for creating new items, and clearing completed ones.
18 | events: {
19 | "keypress #new-todo": "createOnEnter",
20 | "click #clear-completed": "clearCompleted",
21 | "click #toggle-all": "toggleAllComplete"
22 | },
23 |
24 | // At initialization we bind to the relevant events on the `Todos`
25 | // collection, when items are added or changed. Kick things off by
26 | // loading any preexisting todos that might be saved in *localStorage*.
27 | initialize: function() {
28 |
29 | this.input = this.$("#new-todo");
30 | this.allCheckbox = this.$("#toggle-all")[0];
31 |
32 | window.app.Todos.on('add', this.addOne, this);
33 | window.app.Todos.on('reset', this.addAll, this);
34 | window.app.Todos.on('all', this.render, this);
35 |
36 | this.$footer = $('#footer');
37 | this.$main = $('#main');
38 |
39 | window.app.Todos.fetch();
40 | },
41 |
42 | // Re-rendering the App just means refreshing the statistics -- the rest
43 | // of the app doesn't change.
44 | render: function() {
45 | var completed = window.app.Todos.completed().length;
46 | var remaining = window.app.Todos.remaining().length;
47 |
48 | if (window.app.Todos.length) {
49 | this.$main.show();
50 | this.$footer.show();
51 |
52 | this.statsTemplate.render({
53 | completed: completed,
54 | remaining: remaining,
55 | items: (remaining == 1 ? 'item' : 'items')
56 | });
57 |
58 | this.$('#filters li a')
59 | .removeClass('selected')
60 | .filter("[href='#/" + (window.app.TodoFilter || "") + "']")
61 | .addClass('selected');
62 |
63 |
64 | } else {
65 | this.$main.hide();
66 | this.$footer.hide();
67 | }
68 |
69 | this.allCheckbox.checked = !remaining;
70 | },
71 |
72 | // Add a single todo item to the list by creating a view for it, and
73 | // appending its element to the `
48 |
49 |
56 |
57 |
50 |
51 |
52 |
53 |
54 |
55 | - `.
74 | addOne: function(todo) {
75 | var view = new window.app.TodoView({model: todo, el: $('#todo-template li').clone()});
76 | $("#todo-list").append(view.render().el);
77 | },
78 |
79 | // Add all items in the **Todos** collection at once.
80 | addAll: function() {
81 |
82 | this.$("#todo-list").html('');
83 |
84 | switch(window.app.TodoFilter){
85 | case "active":
86 | _.each(window.app.Todos.remaining(), this.addOne);
87 | break;
88 | case "completed":
89 | _.each(window.app.Todos.completed(), this.addOne);
90 | break;
91 | default:
92 | window.app.Todos.each(this.addOne, this);
93 | break;
94 | }
95 |
96 | },
97 |
98 | // Generate the attributes for a new Todo item.
99 | newAttributes: function() {
100 | return {
101 | title: this.input.val().trim(),
102 | order: window.app.Todos.nextOrder(),
103 | completed: false
104 | };
105 | },
106 |
107 | // If you hit return in the main input field, create new **Todo** model,
108 | // persisting it to *localStorage*.
109 | createOnEnter: function(e) {
110 |
111 | if ( e.keyCode !== ENTER_KEY ){
112 | return;
113 | }
114 |
115 | if ( !this.input.val().trim() ){
116 | return;
117 | }
118 |
119 | window.app.Todos.create(this.newAttributes());
120 | this.input.val('');
121 | },
122 |
123 | // Clear all completed todo items, destroying their models.
124 | clearCompleted: function() {
125 | _.each(window.app.Todos.completed(), function(todo){ todo.destroy(); });
126 | return false;
127 | },
128 |
129 | toggleAllComplete: function () {
130 | var completed = this.allCheckbox.checked;
131 | window.app.Todos.each(function (todo) { todo.save({'completed': completed}); });
132 | }
133 | });
134 |
135 |
136 | });
137 |
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/backbone/js/views/todos.js:
--------------------------------------------------------------------------------
1 | $(function() {
2 | 'use strict';
3 |
4 | // Todo Item View
5 | // --------------
6 |
7 | // The DOM element for a todo item...
8 | window.app.TodoView = Backbone.View.extend({
9 |
10 | // The DOM events specific to an item.
11 | events: {
12 | "click .toggle" : "togglecompleted",
13 | "dblclick .view" : "edit",
14 | "click .destroy" : "destroy",
15 | "keypress .edit" : "updateOnEnter",
16 | "blur .edit" : "close"
17 | },
18 |
19 | // The TodoView listens for changes to its model, re-rendering. Since there's
20 | // a one-to-one correspondence between a **Todo** and a **TodoView** in this
21 | // app, we set a direct reference on the model for convenience.
22 | initialize: function() {
23 | this.model.on('change', this.render, this);
24 | this.model.on('destroy', this.remove, this);
25 | },
26 |
27 | // Re-render the titles of the todo item.
28 | render: function() {
29 | var $el = $(this.el);
30 | $el.render(this.model.toJSON(), {
31 | toggle: { checked: function(p) {
32 | p.element.checked = this.completed;
33 | }
34 | }
35 | });
36 |
37 | $el.toggleClass('completed', this.model.get('completed'));
38 |
39 | this.input = this.$('.edit');
40 | return this;
41 | },
42 |
43 | // Toggle the `"completed"` state of the model.
44 | togglecompleted: function() {
45 | this.model.toggle();
46 | },
47 |
48 | // Switch this view into `"editing"` mode, displaying the input field.
49 | edit: function() {
50 | $(this.el).addClass("editing");
51 | this.input.focus();
52 | },
53 |
54 | // Close the `"editing"` mode, saving changes to the todo.
55 | close: function() {
56 | var value = this.input.val().trim();
57 |
58 | if ( !value ){
59 | this.clear();
60 | }
61 |
62 | this.model.save({title: value});
63 | $(this.el).removeClass("editing");
64 | },
65 |
66 | // If you hit `enter`, we're through editing the item.
67 | updateOnEnter: function(e) {
68 | if ( e.keyCode === ENTER_KEY ){
69 | this.close();
70 | }
71 | },
72 |
73 | // Destroy the model.
74 | destroy: function() {
75 | this.model.destroy();
76 | }
77 | });
78 |
79 | });
80 |
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/spine/Cakefile:
--------------------------------------------------------------------------------
1 | {print} = require 'util'
2 | {spawn} = require 'child_process'
3 |
4 | task 'build', 'Build js/ from src/', ->
5 | coffee = spawn 'coffee', ['-c', '-o', 'js', 'src']
6 | coffee.stderr.on 'data', (data) ->
7 | process.stderr.write data.toString()
8 | coffee.stdout.on 'data', (data) ->
9 | print data.toString()
10 | coffee.on 'exit', (code) ->
11 | callback?() if code is 0
12 |
13 | task 'watch', 'Watch src/ for changes', ->
14 | coffee = spawn 'coffee', ['-w', '-c', '-o', 'js', 'src']
15 | coffee.stderr.on 'data', (data) ->
16 | process.stderr.write data.toString()
17 | coffee.stdout.on 'data', (data) ->
18 | print data.toString()
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/spine/css/app.css:
--------------------------------------------------------------------------------
1 | #todo-template {
2 | display: none;
3 | }
4 |
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/spine/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
-
48 | 49 | 50 | 51 | 52 |53 | 54 |
55 |
- 222 | - 223 | 224 | """ 225 | 226 | data = 227 | begin: 'asdf' 228 | end: 'fdsa' 229 | 230 | expected = $ """ 231 |
- 232 | asdf - fdsa 233 | 234 | """ 235 | 236 | template.render data 237 | expect(template).toBeEqual expected 238 | 239 | it "should render empty string, zero and other falsy values", -> 240 | template = $ """ 241 |
- \n - \n "); 113 | data = { 114 | begin: 'asdf', 115 | end: 'fdsa' 116 | }; 117 | expected = $("
- \nasdf - fdsa\n "); 118 | template.render(data); 119 | return expect(template).toBeEqual(expected); 120 | }); 121 | it("should render empty string, zero and other falsy values", function() { 122 | var data, expected, template; 123 | template = $("
- Moar text
todos
17 | 18 |
47 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/spine/js/app.js:
--------------------------------------------------------------------------------
1 | // Generated by CoffeeScript 1.3.3
2 | (function() {
3 | var TodoApp,
4 | __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
5 | __hasProp = {}.hasOwnProperty,
6 | __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
7 |
8 | TodoApp = (function(_super) {
9 | var ENTER_KEY;
10 |
11 | __extends(TodoApp, _super);
12 |
13 | ENTER_KEY = 13;
14 |
15 | TodoApp.prototype.elements = {
16 | '#new-todo': 'newTodoInput',
17 | '#toggle-all': 'toggleAllElem',
18 | '#main': 'main',
19 | '#todo-list': 'todos',
20 | '#footer': 'footer',
21 | '#todo-count': 'count',
22 | '#filters a': 'filters',
23 | '#clear-completed': 'clearCompleted'
24 | };
25 |
26 | TodoApp.prototype.events = {
27 | 'keyup #new-todo': 'new',
28 | 'click #toggle-all': 'toggleAll',
29 | 'click #clear-completed': 'clearCompleted'
30 | };
31 |
32 | function TodoApp() {
33 | this.renderFooter = __bind(this.renderFooter, this);
34 |
35 | this.toggleElems = __bind(this.toggleElems, this);
36 |
37 | this.addAll = __bind(this.addAll, this);
38 |
39 | this.addNew = __bind(this.addNew, this);
40 | TodoApp.__super__.constructor.apply(this, arguments);
41 | Todo.bind('create', this.addNew);
42 | Todo.bind('refresh', this.addAll);
43 | Todo.bind('refresh change', this.toggleElems);
44 | Todo.bind('refresh change', this.renderFooter);
45 | Todo.fetch();
46 | this.routes({
47 | '/:filter': function(param) {
48 | this.filter = param.filter;
49 | Todo.trigger('refresh');
50 | return this.filters.removeClass('selected').filter("[href='#/" + this.filter + "']").addClass('selected');
51 | }
52 | });
53 | }
54 |
55 | TodoApp.prototype["new"] = function(e) {
56 | var val;
57 | val = $.trim(this.newTodoInput.val());
58 | if (e.which === ENTER_KEY && val) {
59 | Todo.create({
60 | title: val
61 | });
62 | return this.newTodoInput.val('');
63 | }
64 | };
65 |
66 | TodoApp.prototype.getByFilter = function() {
67 | switch (this.filter) {
68 | case 'active':
69 | return Todo.active();
70 | case 'completed':
71 | return Todo.completed();
72 | default:
73 | return Todo.all();
74 | }
75 | };
76 |
77 | TodoApp.prototype.addNew = function(todo) {
78 | var view;
79 | view = new Todos({
80 | todo: todo,
81 | el: $('#todo-template li').clone()
82 | });
83 | return this.todos.append(view.render().el);
84 | };
85 |
86 | TodoApp.prototype.addAll = function() {
87 | var todo, _i, _len, _ref, _results;
88 | this.todos.empty();
89 | _ref = this.getByFilter();
90 | _results = [];
91 | for (_i = 0, _len = _ref.length; _i < _len; _i++) {
92 | todo = _ref[_i];
93 | _results.push(this.addNew(todo));
94 | }
95 | return _results;
96 | };
97 |
98 | TodoApp.prototype.toggleAll = function(e) {
99 | return Todo.each(function(todo) {
100 | return todo.updateAttributes({
101 | completed: e.target.checked
102 | });
103 | });
104 | };
105 |
106 | TodoApp.prototype.clearCompleted = function() {
107 | return Todo.destroyCompleted();
108 | };
109 |
110 | TodoApp.prototype.toggleElems = function() {
111 | var isTodos;
112 | isTodos = !!Todo.count();
113 | this.main.toggle(isTodos);
114 | this.footer.toggle(isTodos);
115 | this.clearCompleted.toggle(!!Todo.completed().length);
116 | if (!Todo.completed().length) {
117 | return this.toggleAllElem.removeAttr('checked');
118 | }
119 | };
120 |
121 | TodoApp.prototype.renderFooter = function() {
122 | var active, completed, text;
123 | text = function(count) {
124 | if (count === 1) {
125 | return 'item';
126 | } else {
127 | return 'items';
128 | }
129 | };
130 | active = Todo.active().length;
131 | completed = Todo.completed().length;
132 | this.count.html("" + active + " " + (text(active)) + " left");
133 | return this.clearCompleted.text("Clear completed (" + completed + ")");
134 | };
135 |
136 | return TodoApp;
137 |
138 | })(Spine.Controller);
139 |
140 | $(function() {
141 | new TodoApp({
142 | el: $('#todoapp')
143 | });
144 | return Spine.Route.setup();
145 | });
146 |
147 | }).call(this);
148 |
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/spine/js/controllers/todos.js:
--------------------------------------------------------------------------------
1 | // Generated by CoffeeScript 1.3.3
2 | (function() {
3 | var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
4 | __hasProp = {}.hasOwnProperty,
5 | __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
6 |
7 | window.Todos = (function(_super) {
8 | var ENTER_KEY;
9 |
10 | __extends(Todos, _super);
11 |
12 | ENTER_KEY = 13;
13 |
14 | Todos.prototype.elements = {
15 | '.edit': 'editElem'
16 | };
17 |
18 | Todos.prototype.events = {
19 | 'click .destroy': 'destroy',
20 | 'click .toggle': 'toggle',
21 | 'dblclick .view': 'edit',
22 | 'keyup .edit': 'blurOnEnter',
23 | 'blur .edit': 'finishEdit'
24 | };
25 |
26 | function Todos() {
27 | this.render = __bind(this.render, this);
28 | Todos.__super__.constructor.apply(this, arguments);
29 | this.todo.bind('change', this.render);
30 | this.todo.bind('destroy', this.release);
31 | }
32 |
33 | Todos.prototype.render = function() {
34 | this.el.render(this.todo, {
35 | toggle: {
36 | checked: function(p) {
37 | p.element.checked = this.completed;
38 | }
39 | }
40 | });
41 | this.el.toggleClass('completed', this.todo.completed);
42 | this.refreshElements();
43 | return this;
44 | };
45 |
46 | Todos.prototype.destroy = function() {
47 | return this.todo.destroy();
48 | };
49 |
50 | Todos.prototype.toggle = function() {
51 | return this.todo.updateAttributes({
52 | completed: !this.todo.completed
53 | });
54 | };
55 |
56 | Todos.prototype.edit = function() {
57 | this.el.addClass('editing');
58 | return this.editElem.focus();
59 | };
60 |
61 | Todos.prototype.finishEdit = function() {
62 | var val;
63 | this.el.removeClass('editing');
64 | val = $.trim(this.editElem.val());
65 | if (val) {
66 | return this.todo.updateAttributes({
67 | title: val
68 | });
69 | } else {
70 | return this.todo.destroy();
71 | }
72 | };
73 |
74 | Todos.prototype.blurOnEnter = function(e) {
75 | if (e.keyCode === ENTER_KEY) {
76 | return e.target.blur();
77 | }
78 | };
79 |
80 | return Todos;
81 |
82 | })(Spine.Controller);
83 |
84 | }).call(this);
85 |
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/spine/js/lib/local.js:
--------------------------------------------------------------------------------
1 | // Generated by CoffeeScript 1.3.3
2 | (function() {
3 | var Spine;
4 |
5 | Spine = this.Spine || require('spine');
6 |
7 | Spine.Model.Local = {
8 | extended: function() {
9 | this.change(this.saveLocal);
10 | return this.fetch(this.loadLocal);
11 | },
12 | saveLocal: function() {
13 | var result;
14 | result = JSON.stringify(this);
15 | return localStorage[this.className] = result;
16 | },
17 | loadLocal: function() {
18 | var result;
19 | result = localStorage[this.className];
20 | return this.refresh(result || [], {
21 | clear: true
22 | });
23 | }
24 | };
25 |
26 | if (typeof module !== "undefined" && module !== null) {
27 | module.exports = Spine.Model.Local;
28 | }
29 |
30 | }).call(this);
31 |
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/spine/js/lib/route.js:
--------------------------------------------------------------------------------
1 | // Generated by CoffeeScript 1.3.3
2 | (function() {
3 | var $, Spine, escapeRegExp, hashStrip, namedParam, splatParam,
4 | __hasProp = {}.hasOwnProperty,
5 | __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
6 | __slice = [].slice;
7 |
8 | Spine = this.Spine || require('spine');
9 |
10 | $ = Spine.$;
11 |
12 | hashStrip = /^#*/;
13 |
14 | namedParam = /:([\w\d]+)/g;
15 |
16 | splatParam = /\*([\w\d]+)/g;
17 |
18 | escapeRegExp = /[-[\]{}()+?.,\\^$|#\s]/g;
19 |
20 | Spine.Route = (function(_super) {
21 | var _ref;
22 |
23 | __extends(Route, _super);
24 |
25 | Route.extend(Spine.Events);
26 |
27 | Route.historySupport = ((_ref = window.history) != null ? _ref.pushState : void 0) != null;
28 |
29 | Route.routes = [];
30 |
31 | Route.options = {
32 | trigger: true,
33 | history: false,
34 | shim: false
35 | };
36 |
37 | Route.add = function(path, callback) {
38 | var key, value, _results;
39 | if (typeof path === 'object' && !(path instanceof RegExp)) {
40 | _results = [];
41 | for (key in path) {
42 | value = path[key];
43 | _results.push(this.add(key, value));
44 | }
45 | return _results;
46 | } else {
47 | return this.routes.push(new this(path, callback));
48 | }
49 | };
50 |
51 | Route.setup = function(options) {
52 | if (options == null) {
53 | options = {};
54 | }
55 | this.options = $.extend({}, this.options, options);
56 | if (this.options.history) {
57 | this.history = this.historySupport && this.options.history;
58 | }
59 | if (this.options.shim) {
60 | return;
61 | }
62 | if (this.history) {
63 | $(window).bind('popstate', this.change);
64 | } else {
65 | $(window).bind('hashchange', this.change);
66 | }
67 | return this.change();
68 | };
69 |
70 | Route.unbind = function() {
71 | if (this.history) {
72 | return $(window).unbind('popstate', this.change);
73 | } else {
74 | return $(window).unbind('hashchange', this.change);
75 | }
76 | };
77 |
78 | Route.navigate = function() {
79 | var args, lastArg, options, path;
80 | args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
81 | options = {};
82 | lastArg = args[args.length - 1];
83 | if (typeof lastArg === 'object') {
84 | options = args.pop();
85 | } else if (typeof lastArg === 'boolean') {
86 | options.trigger = args.pop();
87 | }
88 | options = $.extend({}, this.options, options);
89 | path = args.join('/');
90 | if (this.path === path) {
91 | return;
92 | }
93 | this.path = path;
94 | this.trigger('navigate', this.path);
95 | if (options.trigger) {
96 | this.matchRoute(this.path, options);
97 | }
98 | if (options.shim) {
99 | return;
100 | }
101 | if (this.history) {
102 | return history.pushState({}, document.title, this.path);
103 | } else {
104 | return window.location.hash = this.path;
105 | }
106 | };
107 |
108 | Route.getPath = function() {
109 | var path;
110 | path = window.location.pathname;
111 | if (path.substr(0, 1) !== '/') {
112 | path = '/' + path;
113 | }
114 | return path;
115 | };
116 |
117 | Route.getHash = function() {
118 | return window.location.hash;
119 | };
120 |
121 | Route.getFragment = function() {
122 | return this.getHash().replace(hashStrip, '');
123 | };
124 |
125 | Route.getHost = function() {
126 | return (document.location + '').replace(this.getPath() + this.getHash(), '');
127 | };
128 |
129 | Route.change = function() {
130 | var path;
131 | path = this.getFragment() !== '' ? this.getFragment() : this.getPath();
132 | if (path === this.path) {
133 | return;
134 | }
135 | this.path = path;
136 | return this.matchRoute(this.path);
137 | };
138 |
139 | Route.matchRoute = function(path, options) {
140 | var route, _i, _len, _ref1;
141 | _ref1 = this.routes;
142 | for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
143 | route = _ref1[_i];
144 | if (route.match(path, options)) {
145 | this.trigger('change', route, path);
146 | return route;
147 | }
148 | }
149 | };
150 |
151 | function Route(path, callback) {
152 | var match;
153 | this.path = path;
154 | this.callback = callback;
155 | this.names = [];
156 | if (typeof path === 'string') {
157 | namedParam.lastIndex = 0;
158 | while ((match = namedParam.exec(path)) !== null) {
159 | this.names.push(match[1]);
160 | }
161 | splatParam.lastIndex = 0;
162 | while ((match = splatParam.exec(path)) !== null) {
163 | this.names.push(match[1]);
164 | }
165 | path = path.replace(escapeRegExp, '\\$&').replace(namedParam, '([^\/]*)').replace(splatParam, '(.*?)');
166 | this.route = new RegExp('^' + path + '$');
167 | } else {
168 | this.route = path;
169 | }
170 | }
171 |
172 | Route.prototype.match = function(path, options) {
173 | var i, match, param, params, _i, _len;
174 | if (options == null) {
175 | options = {};
176 | }
177 | match = this.route.exec(path);
178 | if (!match) {
179 | return false;
180 | }
181 | options.match = match;
182 | params = match.slice(1);
183 | if (this.names.length) {
184 | for (i = _i = 0, _len = params.length; _i < _len; i = ++_i) {
185 | param = params[i];
186 | options[this.names[i]] = param;
187 | }
188 | }
189 | return this.callback.call(null, options) !== false;
190 | };
191 |
192 | return Route;
193 |
194 | })(Spine.Module);
195 |
196 | Spine.Route.change = Spine.Route.proxy(Spine.Route.change);
197 |
198 | Spine.Controller.include({
199 | route: function(path, callback) {
200 | return Spine.Route.add(path, this.proxy(callback));
201 | },
202 | routes: function(routes) {
203 | var key, value, _results;
204 | _results = [];
205 | for (key in routes) {
206 | value = routes[key];
207 | _results.push(this.route(key, value));
208 | }
209 | return _results;
210 | },
211 | navigate: function() {
212 | return Spine.Route.navigate.apply(Spine.Route, arguments);
213 | }
214 | });
215 |
216 | if (typeof module !== "undefined" && module !== null) {
217 | module.exports = Spine.Route;
218 | }
219 |
220 | }).call(this);
221 |
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/spine/js/models/todo.js:
--------------------------------------------------------------------------------
1 | // Generated by CoffeeScript 1.3.3
2 | (function() {
3 | var __hasProp = {}.hasOwnProperty,
4 | __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
5 |
6 | window.Todo = (function(_super) {
7 |
8 | __extends(Todo, _super);
9 |
10 | function Todo() {
11 | return Todo.__super__.constructor.apply(this, arguments);
12 | }
13 |
14 | Todo.configure('Todo', 'title', 'completed');
15 |
16 | Todo.extend(Spine.Model.Local);
17 |
18 | Todo.active = function() {
19 | return this.select(function(todo) {
20 | return !todo.completed;
21 | });
22 | };
23 |
24 | Todo.completed = function() {
25 | return this.select(function(todo) {
26 | return !!todo.completed;
27 | });
28 | };
29 |
30 | Todo.destroyCompleted = function() {
31 | var todo, _i, _len, _ref, _results;
32 | _ref = this.completed();
33 | _results = [];
34 | for (_i = 0, _len = _ref.length; _i < _len; _i++) {
35 | todo = _ref[_i];
36 | _results.push(todo.destroy());
37 | }
38 | return _results;
39 | };
40 |
41 | return Todo;
42 |
43 | })(Spine.Model);
44 |
45 | }).call(this);
46 |
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/spine/readme.md:
--------------------------------------------------------------------------------
1 | # Spine.js TodoMVC app
2 |
3 |
4 | ## Getting started
5 |
6 | [CoffeeScript](http://coffeescript.org) is required to compile this application if you make changes to the files in the `src` folder.
7 |
8 |
9 | ### Compile
10 |
11 | Open Terminal in this folder.
12 |
13 | - `cake build` to compile once
14 |
15 | - `cake watch` to compile on save
16 |
17 |
18 | ## Credit
19 |
20 | Created by [Sindre Sorhus](https://github.com/sindresorhus)
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/spine/src/app.coffee:
--------------------------------------------------------------------------------
1 | class TodoApp extends Spine.Controller
2 | ENTER_KEY = 13
3 |
4 | elements:
5 | '#new-todo': 'newTodoInput'
6 | '#toggle-all': 'toggleAllElem'
7 | '#main': 'main'
8 | '#todo-list': 'todos'
9 | '#footer': 'footer'
10 | '#todo-count': 'count'
11 | '#filters a': 'filters'
12 | '#clear-completed': 'clearCompleted'
13 |
14 | events:
15 | 'keyup #new-todo': 'new'
16 | 'click #toggle-all': 'toggleAll'
17 | 'click #clear-completed': 'clearCompleted'
18 |
19 | constructor: ->
20 | super
21 | Todo.bind 'create', @addNew
22 | Todo.bind 'refresh', @addAll
23 | Todo.bind 'refresh change', @toggleElems
24 | Todo.bind 'refresh change', @renderFooter
25 | Todo.fetch()
26 |
27 | @routes
28 | '/:filter': (param) ->
29 | @filter = param.filter
30 | Todo.trigger('refresh')
31 | @filters.removeClass('selected')
32 | .filter("[href='#/#{ @filter }']").addClass('selected');
33 |
34 | new: (e) ->
35 | val = $.trim @newTodoInput.val()
36 | if e.which is ENTER_KEY and val
37 | Todo.create title: val
38 | @newTodoInput.val ''
39 |
40 | getByFilter: ->
41 | switch @filter
42 | when 'active'
43 | Todo.active()
44 | when 'completed'
45 | Todo.completed()
46 | else
47 | Todo.all()
48 |
49 | addNew: (todo) =>
50 | view = new Todos todo: todo, el: $('#todo-template li').clone()
51 | @todos.append view.render().el
52 |
53 | addAll: =>
54 | @todos.empty()
55 | @addNew todo for todo in @getByFilter()
56 |
57 | toggleAll: (e) ->
58 | Todo.each (todo) ->
59 | # https://github.com/maccman/spine/issues/219
60 | todo.updateAttributes completed: e.target.checked
61 |
62 | clearCompleted: ->
63 | Todo.destroyCompleted()
64 |
65 | toggleElems: =>
66 | isTodos = !!Todo.count()
67 | @main.toggle isTodos
68 | @footer.toggle isTodos
69 | @clearCompleted.toggle !!Todo.completed().length
70 | @toggleAllElem.removeAttr 'checked' if !Todo.completed().length
71 |
72 | renderFooter: =>
73 | text = (count) -> if count is 1 then 'item' else 'items'
74 | active = Todo.active().length
75 | completed = Todo.completed().length
76 | @count.html "#{ active } #{ text active } left"
77 | @clearCompleted.text "Clear completed (#{ completed })"
78 |
79 |
80 | $ ->
81 | new TodoApp el: $('#todoapp')
82 | Spine.Route.setup()
83 |
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/spine/src/controllers/todos.coffee:
--------------------------------------------------------------------------------
1 | class window.Todos extends Spine.Controller
2 | ENTER_KEY = 13
3 |
4 | elements:
5 | '.edit': 'editElem'
6 |
7 | events:
8 | 'click .destroy': 'destroy'
9 | 'click .toggle': 'toggle'
10 | 'dblclick .view': 'edit'
11 | 'keyup .edit': 'blurOnEnter'
12 | 'blur .edit': 'finishEdit'
13 |
14 | constructor: ->
15 | super
16 | @todo.bind 'change', @render
17 | @todo.bind 'destroy', @release
18 |
19 | render: =>
20 | @el.render @todo,
21 | toggle: checked: (p) ->
22 | p.element.checked = @completed
23 | return
24 |
25 | @el.toggleClass 'completed', @todo.completed
26 | @refreshElements()
27 | @
28 |
29 | destroy: ->
30 | @todo.destroy()
31 |
32 | toggle: ->
33 | @todo.updateAttributes completed: !@todo.completed
34 |
35 | edit: ->
36 | @el.addClass 'editing'
37 | @editElem.focus()
38 |
39 | finishEdit: ->
40 | @el.removeClass 'editing'
41 | val = $.trim @editElem.val()
42 | if val then @todo.updateAttributes(title: val) else @todo.destroy()
43 |
44 | blurOnEnter: (e) ->
45 | if e.keyCode is ENTER_KEY then e.target.blur()
46 |
--------------------------------------------------------------------------------
/examples/todomvc/architecture-examples/spine/src/models/todo.coffee:
--------------------------------------------------------------------------------
1 | class window.Todo extends Spine.Model
2 | @configure 'Todo', 'title', 'completed'
3 | @extend Spine.Model.Local
4 |
5 | @active: ->
6 | @select (todo) -> !todo.completed
7 |
8 | @completed: ->
9 | @select (todo) -> !!todo.completed
10 |
11 | @destroyCompleted: ->
12 | todo.destroy() for todo in @completed()
--------------------------------------------------------------------------------
/examples/todomvc/assets/base.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | button {
8 | margin: 0;
9 | padding: 0;
10 | border: 0;
11 | background: none;
12 | font-size: 100%;
13 | vertical-align: baseline;
14 | font-family: inherit;
15 | color: inherit;
16 | -webkit-appearance: none;
17 | /*-moz-appearance: none;*/
18 | -ms-appearance: none;
19 | -o-appearance: none;
20 | appearance: none;
21 | }
22 |
23 | body {
24 | font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
25 | line-height: 1.4em;
26 | background: #eaeaea url('bg.png');
27 | color: #4d4d4d;
28 | width: 550px;
29 | margin: 0 auto;
30 | -webkit-font-smoothing: antialiased;
31 | -moz-font-smoothing: antialiased;
32 | -ms-font-smoothing: antialiased;
33 | -o-font-smoothing: antialiased;
34 | font-smoothing: antialiased;
35 | }
36 |
37 | #todoapp {
38 | background: #fff;
39 | background: rgba(255, 255, 255, 0.9);
40 | margin: 130px 0 40px 0;
41 | border: 1px solid #ccc;
42 | position: relative;
43 | border-top-left-radius: 2px;
44 | border-top-right-radius: 2px;
45 | box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
46 | 0 25px 50px 0 rgba(0, 0, 0, 0.15);
47 | }
48 |
49 | #todoapp:before {
50 | content: '';
51 | border-left: 1px solid #f5d6d6;
52 | border-right: 1px solid #f5d6d6;
53 | width: 2px;
54 | position: absolute;
55 | top: 0;
56 | left: 40px;
57 | height: 100%;
58 | }
59 |
60 | #todoapp input::-webkit-input-placeholder {
61 | font-style: italic;
62 | }
63 |
64 | #todoapp input:-moz-placeholder {
65 | font-style: italic;
66 | color: #a9a9a9;
67 | }
68 |
69 | #todoapp h1 {
70 | position: absolute;
71 | top: -120px;
72 | width: 100%;
73 | font-size: 70px;
74 | font-weight: bold;
75 | text-align: center;
76 | color: #b3b3b3;
77 | color: rgba(255, 255, 255, 0.3);
78 | text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
79 | -webkit-text-rendering: optimizeLegibility;
80 | -moz-text-rendering: optimizeLegibility;
81 | -ms-text-rendering: optimizeLegibility;
82 | -o-text-rendering: optimizeLegibility;
83 | text-rendering: optimizeLegibility;
84 | }
85 |
86 | #header {
87 | padding-top: 15px;
88 | border-radius: inherit;
89 | }
90 |
91 | #header:before {
92 | content: '';
93 | position: absolute;
94 | top: 0;
95 | right: 0;
96 | left: 0;
97 | height: 15px;
98 | z-index: 2;
99 | border-bottom: 1px solid #6c615c;
100 | background: #8d7d77;
101 | background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
102 | background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
103 | background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
104 | background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
105 | background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
106 | background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
107 | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
108 | border-top-left-radius: 1px;
109 | border-top-right-radius: 1px;
110 | }
111 |
112 | #new-todo,
113 | .edit {
114 | position: relative;
115 | margin: 0;
116 | width: 100%;
117 | font-size: 24px;
118 | font-family: inherit;
119 | line-height: 1.4em;
120 | border: 0;
121 | outline: none;
122 | color: inherit;
123 | padding: 6px;
124 | border: 1px solid #999;
125 | box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
126 | -webkit-box-sizing: border-box;
127 | -moz-box-sizing: border-box;
128 | -ms-box-sizing: border-box;
129 | -o-box-sizing: border-box;
130 | box-sizing: border-box;
131 | -webkit-font-smoothing: antialiased;
132 | -moz-font-smoothing: antialiased;
133 | -ms-font-smoothing: antialiased;
134 | -o-font-smoothing: antialiased;
135 | font-smoothing: antialiased;
136 | }
137 |
138 | #new-todo {
139 | padding: 16px 16px 16px 60px;
140 | border: none;
141 | background: rgba(0, 0, 0, 0.02);
142 | z-index: 2;
143 | box-shadow: none;
144 | }
145 |
146 | #main {
147 | position: relative;
148 | z-index: 2;
149 | border-top: 1px dotted #adadad;
150 | }
151 |
152 | label[for='toggle-all'] {
153 | display: none;
154 | }
155 |
156 | #toggle-all {
157 | position: absolute;
158 | top: -56px;
159 | left: -15px;
160 | width: 65px;
161 | height: 41px;
162 | text-align: center;
163 | border: none; /* Mobile Safari */
164 | -webkit-appearance: none;
165 | /*-moz-appearance: none;*/
166 | -ms-appearance: none;
167 | -o-appearance: none;
168 | appearance: none;
169 | -webkit-transform: rotate(90deg);
170 | /*-moz-transform: rotate(90deg);*/
171 | -ms-transform: rotate(90deg);
172 | /*-o-transform: rotate(90deg);*/
173 | transform: rotate(90deg);
174 | }
175 |
176 | #toggle-all:before {
177 | content: '»';
178 | font-size: 28px;
179 | color: #d9d9d9;
180 | padding: 0 25px 7px;
181 | }
182 |
183 | #toggle-all:checked:before {
184 | color: #737373;
185 | }
186 |
187 | #todo-list {
188 | margin: 0;
189 | padding: 0;
190 | list-style: none;
191 | }
192 |
193 | #todo-list li {
194 | position: relative;
195 | font-size: 24px;
196 | border-bottom: 1px dotted #ccc;
197 | }
198 |
199 | #todo-list li:last-child {
200 | border-bottom: none;
201 | }
202 |
203 | #todo-list li.editing {
204 | border-bottom: none;
205 | padding: 0;
206 | }
207 |
208 | #todo-list li.editing .edit {
209 | display: block;
210 | width: 506px;
211 | padding: 13px 17px 12px 17px;
212 | margin: 0 0 0 43px;
213 | }
214 |
215 | #todo-list li.editing .view {
216 | display: none;
217 | }
218 |
219 | #todo-list li .toggle {
220 | text-align: center;
221 | width: 40px;
222 | height: 40px;
223 | position: absolute;
224 | top: 0;
225 | bottom: 0;
226 | margin: auto 0;
227 | border: none; /* Mobile Safari */
228 | -webkit-appearance: none;
229 | /*-moz-appearance: none;*/
230 | -ms-appearance: none;
231 | -o-appearance: none;
232 | appearance: none;
233 | }
234 |
235 | #todo-list li .toggle:after {
236 | font-size: 18px;
237 | content: '✔';
238 | line-height: 43px; /* 40 + a couple of pixels visual adjustment */
239 | font-size: 20px;
240 | color: #d9d9d9;
241 | text-shadow: 0 -1px 0 #bfbfbf;
242 | }
243 |
244 | #todo-list li .toggle:checked:after {
245 | color: #85ada7;
246 | text-shadow: 0 1px 0 #669991;
247 | bottom: 1px;
248 | position: relative;
249 | }
250 |
251 | #todo-list li label {
252 | word-break: break-word;
253 | margin: 15px 15px 15px 60px;
254 | display: inline-block;
255 | line-height: 1.2;
256 | -webkit-transition: color 0.4s;
257 | -moz-transition: color 0.4s;
258 | -ms-transition: color 0.4s;
259 | -o-transition: color 0.4s;
260 | transition: color 0.4s;
261 | }
262 |
263 | #todo-list li.completed label {
264 | color: #a9a9a9;
265 | text-decoration: line-through;
266 | }
267 |
268 | #todo-list li .destroy {
269 | display: none;
270 | position: absolute;
271 | top: 0;
272 | right: 10px;
273 | bottom: 0;
274 | width: 40px;
275 | height: 40px;
276 | margin: auto 0;
277 | font-size: 22px;
278 | color: #a88a8a;
279 | -webkit-transition: all 0.2s;
280 | -moz-transition: all 0.2s;
281 | -ms-transition: all 0.2s;
282 | -o-transition: all 0.2s;
283 | transition: all 0.2s;
284 | }
285 |
286 | #todo-list li .destroy:hover {
287 | text-shadow: 0 0 1px #000,
288 | 0 0 10px rgba(199, 107, 107, 0.8);
289 | -webkit-transform: scale(1.3);
290 | -moz-transform: scale(1.3);
291 | -ms-transform: scale(1.3);
292 | -o-transform: scale(1.3);
293 | transform: scale(1.3);
294 | }
295 |
296 | #todo-list li .destroy:after {
297 | content: '✖';
298 | }
299 |
300 | #todo-list li:hover .destroy {
301 | display: block;
302 | }
303 |
304 | #todo-list li .edit {
305 | display: none;
306 | }
307 |
308 | #todo-list li.editing:last-child {
309 | margin-bottom: -1px;
310 | }
311 |
312 | #footer {
313 | color: #777;
314 | padding: 0 15px;
315 | position: absolute;
316 | right: 0;
317 | bottom: -31px;
318 | left: 0;
319 | height: 20px;
320 | z-index: 1;
321 | text-align: center;
322 | }
323 |
324 | #footer:before {
325 | content: '';
326 | position: absolute;
327 | right: 0;
328 | bottom: 31px;
329 | left: 0;
330 | height: 50px;
331 | z-index: -1;
332 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
333 | 0 6px 0 -3px rgba(255, 255, 255, 0.8),
334 | 0 7px 1px -3px rgba(0, 0, 0, 0.3),
335 | 0 43px 0 -6px rgba(255, 255, 255, 0.8),
336 | 0 44px 2px -6px rgba(0, 0, 0, 0.2);
337 | }
338 |
339 | #todo-count {
340 | float: left;
341 | text-align: left;
342 | }
343 |
344 | #filters {
345 | margin: 0;
346 | padding: 0;
347 | list-style: none;
348 | position: absolute;
349 | right: 0;
350 | left: 0;
351 | }
352 |
353 | #filters li {
354 | display: inline;
355 | }
356 |
357 | #filters li a {
358 | color: #83756f;
359 | margin: 2px;
360 | text-decoration: none;
361 | }
362 |
363 | #filters li a.selected {
364 | font-weight: bold;
365 | }
366 |
367 | #clear-completed {
368 | float: right;
369 | position: relative;
370 | line-height: 20px;
371 | text-decoration: none;
372 | background: rgba(0, 0, 0, 0.1);
373 | font-size: 11px;
374 | padding: 0 10px;
375 | border-radius: 3px;
376 | box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
377 | }
378 |
379 | #clear-completed:hover {
380 | background: rgba(0, 0, 0, 0.15);
381 | box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
382 | }
383 |
384 | #info {
385 | margin: 65px auto 0;
386 | color: #a6a6a6;
387 | font-size: 12px;
388 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
389 | text-align: center;
390 | }
391 |
392 | #info a {
393 | color: inherit;
394 | }
395 |
396 | /*
397 | Hack to remove background from Mobile Safari.
398 | Can't use it globally since it destroys checkboxes in Firefox and Opera
399 | */
400 | @media screen and (-webkit-min-device-pixel-ratio:0) {
401 | #toggle-all,
402 | #todo-list li .toggle {
403 | background: none;
404 | }
405 | }
--------------------------------------------------------------------------------
/examples/todomvc/assets/base.js:
--------------------------------------------------------------------------------
1 | (function( window ) {
2 | 'use strict';
3 |
4 | if ( location.hostname === 'todomvc.com' ) {
5 | var _gaq=[['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
6 | }
7 | })( window );
--------------------------------------------------------------------------------
/examples/todomvc/assets/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leonidas/transparency/92149b83e7202423a764e1cc2ec5d78e43f77ce2/examples/todomvc/assets/bg.png
--------------------------------------------------------------------------------
/examples/todomvc/assets/crossroads.min.js:
--------------------------------------------------------------------------------
1 | /** @license
2 | * crossroads 
83 | Addy is a Developer Platform Engineer at Google who originally created TodoMVC. He oversees the project direction, drives expansion and helps lead core development with Sindre Sorhus (by far our most active contributor!).
84 |
85 | #### [Sindre Sorhus](https://github.com/sindresorhus) - Lead Developer
86 |
87 | 
88 | Sindre is a Web Developer who drives core development, quality control and application design for the project. His contributions have helped us ensure consistency and best practices are enforced wherever possible.
89 |
90 | #### [Aaron Boushley](https://github.com/boushley) - on leave
91 |
92 | Aaron is a JavaScript developer with a keen interest in architectural frameworks and has helped both standardize existing examples and improve the project as we worked on expansion. He is currently taking a break from his open-source contributions at this time.
93 |
94 | #### [Gianni Chiappetta](http://gitub.com/gf3) - Logo designer
95 |
96 |
97 | ## Disclaimer
98 |
99 | TodoMVC has been called many things including the 'Speed-dating' and 'Rosetta Stone' of MV* frameworks. Whilst we hope that this project is able to offer assistance in deciding what frameworks are worth spending more time looking at, remember that the Todo application offers a limited view of what a framework may be capable of.
100 |
101 | It is meant to be used as a gateway to reviewing how a basic application using a framework may be structured and we heavily recommend investing time researching a solution in more depth before opting to use it.
102 |
103 |
104 | ## Project Status
105 |
106 | TodoMVC is currently preparing applications for the next major release of the project due out in early July. This will include re-writes of almost all applications, ensuring they follow a consistent set of specifications and are using the latest versions of all libraries and frameworks in use. We will also be addressing framework author concerns about routing by adding this to some of the more mainstream applications in the project.
107 |
108 |
109 | ## Getting Involved
110 |
111 | Whilst we enjoy implementing and improving existing Todo apps, we're always interested in speaking to framework authors (and users) wishing to share Todo app implementations in their framework/solution of choice.
112 |
113 | ### New Applications
114 |
115 | If you have an implementation you would like to show us or a patch you would like to send upstream, please feel free to send through a pull request after:
116 |
117 | * Reading our [contribution guidelines](https://github.com/addyosmani/todomvc/wiki)
118 | * Going through our [application specification](https://github.com/addyosmani/todomvc/wiki/App-Specification)
119 | * Looking at our most recent [reference application](https://github.com/addyosmani/todomvc/tree/master/architecture-examples/spine)
120 |
121 | One of us will be happy to review your submission and discuss any changes that may be required before they can be included.
122 |
123 |
124 | ### Unit Tests
125 |
126 | At present, due to the large number of applications in the TodoMVC suite we haven't been mandating that unit tests be written in order for an application to be accepted.
127 |
128 | We do however plan on addressing this in a future release as we feel it would both help further ensure consistency and provide developers with a reference for writing tests for each framework.
129 |
130 | If you are a library author or contributor wishing to start work on writing tests for an implementation, we'll happily consider including them in the future. This may change based on how we specify unit tests must be structured and so on post 1.0.
131 |
132 |
133 | ### A Final Note
134 |
135 | Note that due to the current number of MVC/MVVM/MV* frameworks in circulation at the moment, it's not always possible to include each one in TodoMVC, but we'll definitely discuss the merits of any framework prior to making a decision. We hope you understand :)
136 |
137 |
138 | ## License
139 |
140 | [The Unlicense](unlicense.org) (i.e Public Domain)
--------------------------------------------------------------------------------
/gulpfile.coffee:
--------------------------------------------------------------------------------
1 | gulp = require 'gulp'
2 | coffee = require 'gulp-coffee'
3 | streamify = require 'gulp-streamify'
4 | uglify = require 'gulp-uglify'
5 | mochaPhantomJS = require 'gulp-mocha-phantomjs'
6 | mocha = require 'gulp-mocha'
7 | source = require 'vinyl-source-stream'
8 | browserify = require 'browserify'
9 |
10 | gulp.task 'compile', ->
11 | gulp
12 | .src './src/*.coffee'
13 | .pipe coffee bare: true
14 | .pipe gulp.dest './lib/'
15 |
16 |
17 | gulp.task 'compile:tests', ->
18 | gulp
19 | .src './spec/**/*.coffee'
20 | .pipe coffee()
21 | .pipe gulp.dest './spec/'
22 |
23 |
24 | gulp.task 'bundle', ['compile'], ->
25 | bundle = browserify entries: './lib/transparency.js'
26 | .bundle()
27 |
28 | bundle
29 | .pipe source 'transparency.js'
30 | .pipe gulp.dest './dist/'
31 |
32 | bundle
33 | .pipe source 'transparency.min.js'
34 | .pipe streamify uglify()
35 | .pipe gulp.dest './dist/'
36 |
37 |
38 | gulp.task 'test:functional', ['compile:tests'], ->
39 | gulp
40 | .src './spec/functionalSpecRunner.html'
41 | .pipe mochaPhantomJS()
42 |
43 |
44 | gulp.task 'test:amd', ['compile:tests'], ->
45 | gulp
46 | .src './spec/amdSpecRunner.html'
47 | .pipe mochaPhantomJS()
48 |
49 |
50 | gulp.task 'test:nodejs', ['compile:tests'], ->
51 | gulp
52 | .src './spec/serverSpec.js'
53 | .pipe mocha()
54 |
55 |
56 | gulp.task 'test:performance', ['compile:tests'], ->
57 | gulp
58 | .src './spec/performanceSpecRunner.html'
59 | .pipe mochaPhantomJS()
60 |
61 |
62 | gulp.task 'watch', ->
63 | gulp.watch './**/*.coffee', ['bundle', 'test']
64 |
65 |
66 | gulp.task 'test', ['bundle', 'test:functional', 'test:amd', 'test:nodejs']
67 | gulp.task 'release', ['bundle', 'test', 'test:performance']
68 | gulp.task 'default', ['bundle', 'test', 'watch']
69 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./lib/transparency');
2 |
--------------------------------------------------------------------------------
/lib/attributeFactory.js:
--------------------------------------------------------------------------------
1 | var Attribute, AttributeFactory, BooleanAttribute, Class, Html, Text, _, helpers,
2 | extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
3 | hasProp = {}.hasOwnProperty;
4 |
5 | _ = require('../lib/lodash');
6 |
7 | helpers = require('./helpers');
8 |
9 | module.exports = AttributeFactory = {
10 | Attributes: {},
11 | createAttribute: function(element, name) {
12 | var Attr;
13 | Attr = AttributeFactory.Attributes[name] || Attribute;
14 | return new Attr(element, name);
15 | }
16 | };
17 |
18 | Attribute = (function() {
19 | function Attribute(el1, name1) {
20 | this.el = el1;
21 | this.name = name1;
22 | this.templateValue = this.el.getAttribute(this.name) || '';
23 | }
24 |
25 | Attribute.prototype.set = function(value) {
26 | this.el[this.name] = value;
27 | return this.el.setAttribute(this.name, value.toString());
28 | };
29 |
30 | return Attribute;
31 |
32 | })();
33 |
34 | BooleanAttribute = (function(superClass) {
35 | var BOOLEAN_ATTRIBUTES, i, len, name;
36 |
37 | extend(BooleanAttribute, superClass);
38 |
39 | BOOLEAN_ATTRIBUTES = ['hidden', 'async', 'defer', 'autofocus', 'formnovalidate', 'disabled', 'autofocus', 'formnovalidate', 'multiple', 'readonly', 'required', 'checked', 'scoped', 'reversed', 'selected', 'loop', 'muted', 'autoplay', 'controls', 'seamless', 'default', 'ismap', 'novalidate', 'open', 'typemustmatch', 'truespeed'];
40 |
41 | for (i = 0, len = BOOLEAN_ATTRIBUTES.length; i < len; i++) {
42 | name = BOOLEAN_ATTRIBUTES[i];
43 | AttributeFactory.Attributes[name] = BooleanAttribute;
44 | }
45 |
46 | function BooleanAttribute(el1, name1) {
47 | this.el = el1;
48 | this.name = name1;
49 | this.templateValue = this.el.getAttribute(this.name) || false;
50 | }
51 |
52 | BooleanAttribute.prototype.set = function(value) {
53 | this.el[this.name] = value;
54 | if (value) {
55 | return this.el.setAttribute(this.name, this.name);
56 | } else {
57 | return this.el.removeAttribute(this.name);
58 | }
59 | };
60 |
61 | return BooleanAttribute;
62 |
63 | })(Attribute);
64 |
65 | Text = (function(superClass) {
66 | extend(Text, superClass);
67 |
68 | AttributeFactory.Attributes['text'] = Text;
69 |
70 | function Text(el1, name1) {
71 | var child;
72 | this.el = el1;
73 | this.name = name1;
74 | this.templateValue = ((function() {
75 | var i, len, ref, results;
76 | ref = this.el.childNodes;
77 | results = [];
78 | for (i = 0, len = ref.length; i < len; i++) {
79 | child = ref[i];
80 | if (child.nodeType === helpers.TEXT_NODE) {
81 | results.push(child.nodeValue);
82 | }
83 | }
84 | return results;
85 | }).call(this)).join('');
86 | this.children = _.toArray(this.el.children);
87 | if (!(this.textNode = this.el.firstChild)) {
88 | this.el.appendChild(this.textNode = this.el.ownerDocument.createTextNode(''));
89 | } else if (this.textNode.nodeType !== helpers.TEXT_NODE) {
90 | this.textNode = this.el.insertBefore(this.el.ownerDocument.createTextNode(''), this.textNode);
91 | }
92 | }
93 |
94 | Text.prototype.set = function(text) {
95 | var child, i, len, ref, results;
96 | while (child = this.el.firstChild) {
97 | this.el.removeChild(child);
98 | }
99 | this.textNode.nodeValue = text;
100 | this.el.appendChild(this.textNode);
101 | ref = this.children;
102 | results = [];
103 | for (i = 0, len = ref.length; i < len; i++) {
104 | child = ref[i];
105 | results.push(this.el.appendChild(child));
106 | }
107 | return results;
108 | };
109 |
110 | return Text;
111 |
112 | })(Attribute);
113 |
114 | Html = (function(superClass) {
115 | extend(Html, superClass);
116 |
117 | AttributeFactory.Attributes['html'] = Html;
118 |
119 | function Html(el1) {
120 | this.el = el1;
121 | this.templateValue = '';
122 | this.children = _.toArray(this.el.children);
123 | }
124 |
125 | Html.prototype.set = function(html) {
126 | var child, i, len, ref, results;
127 | while (child = this.el.firstChild) {
128 | this.el.removeChild(child);
129 | }
130 | this.el.innerHTML = html + this.templateValue;
131 | ref = this.children;
132 | results = [];
133 | for (i = 0, len = ref.length; i < len; i++) {
134 | child = ref[i];
135 | results.push(this.el.appendChild(child));
136 | }
137 | return results;
138 | };
139 |
140 | return Html;
141 |
142 | })(Attribute);
143 |
144 | Class = (function(superClass) {
145 | extend(Class, superClass);
146 |
147 | AttributeFactory.Attributes['class'] = Class;
148 |
149 | function Class(el) {
150 | Class.__super__.constructor.call(this, el, 'class');
151 | }
152 |
153 | return Class;
154 |
155 | })(Attribute);
156 |
--------------------------------------------------------------------------------
/lib/context.js:
--------------------------------------------------------------------------------
1 | var Context, Instance, after, before, chainable, cloneNode, ref;
2 |
3 | ref = require('./helpers'), before = ref.before, after = ref.after, chainable = ref.chainable, cloneNode = ref.cloneNode;
4 |
5 | Instance = require('./instance');
6 |
7 | module.exports = Context = (function() {
8 | var attach, detach;
9 |
10 | detach = chainable(function() {
11 | this.parent = this.el.parentNode;
12 | if (this.parent) {
13 | this.nextSibling = this.el.nextSibling;
14 | return this.parent.removeChild(this.el);
15 | }
16 | });
17 |
18 | attach = chainable(function() {
19 | if (this.parent) {
20 | if (this.nextSibling) {
21 | return this.parent.insertBefore(this.el, this.nextSibling);
22 | } else {
23 | return this.parent.appendChild(this.el);
24 | }
25 | }
26 | });
27 |
28 | function Context(el, Transparency) {
29 | this.el = el;
30 | this.Transparency = Transparency;
31 | this.template = cloneNode(this.el);
32 | this.instances = [new Instance(this.el, this.Transparency)];
33 | this.instanceCache = [];
34 | }
35 |
36 | Context.prototype.render = before(detach)(after(attach)(chainable(function(models, directives, options) {
37 | var children, i, index, instance, len, model, results;
38 | while (models.length < this.instances.length) {
39 | this.instanceCache.push(this.instances.pop().remove());
40 | }
41 | while (models.length > this.instances.length) {
42 | instance = this.instanceCache.pop() || new Instance(cloneNode(this.template), this.Transparency);
43 | this.instances.push(instance.appendTo(this.el));
44 | }
45 | results = [];
46 | for (index = i = 0, len = models.length; i < len; index = ++i) {
47 | model = models[index];
48 | instance = this.instances[index];
49 | children = [];
50 | results.push(instance.prepare(model, children).renderValues(model, children).renderDirectives(model, index, directives).renderChildren(model, children, directives, options));
51 | }
52 | return results;
53 | })));
54 |
55 | return Context;
56 |
57 | })();
58 |
--------------------------------------------------------------------------------
/lib/elementFactory.js:
--------------------------------------------------------------------------------
1 | var AttributeFactory, Checkbox, Element, ElementFactory, Input, Radio, Select, TextArea, VoidElement, _, helpers,
2 | hasProp = {}.hasOwnProperty,
3 | extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
4 |
5 | _ = require('../lib/lodash.js');
6 |
7 | helpers = require('./helpers');
8 |
9 | AttributeFactory = require('./attributeFactory');
10 |
11 | module.exports = ElementFactory = {
12 | Elements: {
13 | input: {}
14 | },
15 | createElement: function(el) {
16 | var El, name;
17 | if ('input' === (name = el.nodeName.toLowerCase())) {
18 | El = ElementFactory.Elements[name][el.type.toLowerCase()] || Input;
19 | } else {
20 | El = ElementFactory.Elements[name] || Element;
21 | }
22 | return new El(el);
23 | }
24 | };
25 |
26 | Element = (function() {
27 | function Element(el1) {
28 | this.el = el1;
29 | this.attributes = {};
30 | this.childNodes = _.toArray(this.el.childNodes);
31 | this.nodeName = this.el.nodeName.toLowerCase();
32 | this.classNames = this.el.className.split(' ');
33 | this.originalAttributes = {};
34 | }
35 |
36 | Element.prototype.empty = function() {
37 | var child;
38 | while (child = this.el.firstChild) {
39 | this.el.removeChild(child);
40 | }
41 | return this;
42 | };
43 |
44 | Element.prototype.reset = function() {
45 | var attribute, name, ref, results;
46 | ref = this.attributes;
47 | results = [];
48 | for (name in ref) {
49 | attribute = ref[name];
50 | results.push(attribute.set(attribute.templateValue));
51 | }
52 | return results;
53 | };
54 |
55 | Element.prototype.render = function(value) {
56 | return this.attr('text', value);
57 | };
58 |
59 | Element.prototype.attr = function(name, value) {
60 | var attribute, base;
61 | attribute = (base = this.attributes)[name] || (base[name] = AttributeFactory.createAttribute(this.el, name, value));
62 | if (value != null) {
63 | attribute.set(value);
64 | }
65 | return attribute;
66 | };
67 |
68 | Element.prototype.renderDirectives = function(model, index, attributes) {
69 | var directive, name, results, value;
70 | results = [];
71 | for (name in attributes) {
72 | if (!hasProp.call(attributes, name)) continue;
73 | directive = attributes[name];
74 | if (!(typeof directive === 'function')) {
75 | continue;
76 | }
77 | value = directive.call(model, {
78 | element: this.el,
79 | index: index,
80 | value: this.attr(name).templateValue
81 | });
82 | if (value != null) {
83 | results.push(this.attr(name, value));
84 | } else {
85 | results.push(void 0);
86 | }
87 | }
88 | return results;
89 | };
90 |
91 | return Element;
92 |
93 | })();
94 |
95 | Select = (function(superClass) {
96 | extend(Select, superClass);
97 |
98 | ElementFactory.Elements['select'] = Select;
99 |
100 | function Select(el) {
101 | Select.__super__.constructor.call(this, el);
102 | this.elements = helpers.getElements(el);
103 | }
104 |
105 | Select.prototype.render = function(value) {
106 | var i, len, option, ref, results;
107 | value = value.toString();
108 | ref = this.elements;
109 | results = [];
110 | for (i = 0, len = ref.length; i < len; i++) {
111 | option = ref[i];
112 | if (option.nodeName === 'option') {
113 | results.push(option.attr('selected', option.el.value === value));
114 | }
115 | }
116 | return results;
117 | };
118 |
119 | return Select;
120 |
121 | })(Element);
122 |
123 | VoidElement = (function(superClass) {
124 | var VOID_ELEMENTS, i, len, nodeName;
125 |
126 | extend(VoidElement, superClass);
127 |
128 | function VoidElement() {
129 | return VoidElement.__super__.constructor.apply(this, arguments);
130 | }
131 |
132 | VOID_ELEMENTS = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
133 |
134 | for (i = 0, len = VOID_ELEMENTS.length; i < len; i++) {
135 | nodeName = VOID_ELEMENTS[i];
136 | ElementFactory.Elements[nodeName] = VoidElement;
137 | }
138 |
139 | VoidElement.prototype.attr = function(name, value) {
140 | if (name !== 'text' && name !== 'html') {
141 | return VoidElement.__super__.attr.call(this, name, value);
142 | }
143 | };
144 |
145 | return VoidElement;
146 |
147 | })(Element);
148 |
149 | Input = (function(superClass) {
150 | extend(Input, superClass);
151 |
152 | function Input() {
153 | return Input.__super__.constructor.apply(this, arguments);
154 | }
155 |
156 | Input.prototype.render = function(value) {
157 | return this.attr('value', value);
158 | };
159 |
160 | return Input;
161 |
162 | })(VoidElement);
163 |
164 | TextArea = (function(superClass) {
165 | extend(TextArea, superClass);
166 |
167 | function TextArea() {
168 | return TextArea.__super__.constructor.apply(this, arguments);
169 | }
170 |
171 | ElementFactory.Elements['textarea'] = TextArea;
172 |
173 | return TextArea;
174 |
175 | })(Input);
176 |
177 | Checkbox = (function(superClass) {
178 | extend(Checkbox, superClass);
179 |
180 | function Checkbox() {
181 | return Checkbox.__super__.constructor.apply(this, arguments);
182 | }
183 |
184 | ElementFactory.Elements['input']['checkbox'] = Checkbox;
185 |
186 | Checkbox.prototype.render = function(value) {
187 | return this.attr('checked', Boolean(value));
188 | };
189 |
190 | return Checkbox;
191 |
192 | })(Input);
193 |
194 | Radio = (function(superClass) {
195 | extend(Radio, superClass);
196 |
197 | function Radio() {
198 | return Radio.__super__.constructor.apply(this, arguments);
199 | }
200 |
201 | ElementFactory.Elements['input']['radio'] = Radio;
202 |
203 | return Radio;
204 |
205 | })(Checkbox);
206 |
--------------------------------------------------------------------------------
/lib/helpers.js:
--------------------------------------------------------------------------------
1 | var ElementFactory, _getElements, expando, html5Clone;
2 |
3 | ElementFactory = require('./elementFactory');
4 |
5 | exports.before = function(decorator) {
6 | return function(method) {
7 | return function() {
8 | decorator.apply(this, arguments);
9 | return method.apply(this, arguments);
10 | };
11 | };
12 | };
13 |
14 | exports.after = function(decorator) {
15 | return function(method) {
16 | return function() {
17 | method.apply(this, arguments);
18 | return decorator.apply(this, arguments);
19 | };
20 | };
21 | };
22 |
23 | exports.chainable = exports.after(function() {
24 | return this;
25 | });
26 |
27 | exports.onlyWith$ = function(fn) {
28 | if ((typeof jQuery !== "undefined" && jQuery !== null) || (typeof Zepto !== "undefined" && Zepto !== null)) {
29 | return (function($) {
30 | return fn(arguments);
31 | })(jQuery || Zepto);
32 | }
33 | };
34 |
35 | exports.getElements = function(el) {
36 | var elements;
37 | elements = [];
38 | _getElements(el, elements);
39 | return elements;
40 | };
41 |
42 | _getElements = function(template, elements) {
43 | var child, results;
44 | child = template.firstChild;
45 | results = [];
46 | while (child) {
47 | if (child.nodeType === exports.ELEMENT_NODE) {
48 | elements.push(new ElementFactory.createElement(child));
49 | _getElements(child, elements);
50 | }
51 | results.push(child = child.nextSibling);
52 | }
53 | return results;
54 | };
55 |
56 | exports.ELEMENT_NODE = 1;
57 |
58 | exports.TEXT_NODE = 3;
59 |
60 | html5Clone = function() {
61 | return document.createElement('nav').cloneNode(true).outerHTML !== '<:nav>';
62 | };
63 |
64 | exports.cloneNode = (typeof document === "undefined" || document === null) || html5Clone() ? function(node) {
65 | return node.cloneNode(true);
66 | } : function(node) {
67 | var cloned, element, i, len, ref;
68 | cloned = Transparency.clone(node);
69 | if (cloned.nodeType === exports.ELEMENT_NODE) {
70 | cloned.removeAttribute(expando);
71 | ref = cloned.getElementsByTagName('*');
72 | for (i = 0, len = ref.length; i < len; i++) {
73 | element = ref[i];
74 | element.removeAttribute(expando);
75 | }
76 | }
77 | return cloned;
78 | };
79 |
80 | expando = 'transparency';
81 |
82 | exports.data = function(element) {
83 | return element[expando] || (element[expando] = {});
84 | };
85 |
86 | exports.nullLogger = function() {};
87 |
88 | exports.consoleLogger = function() {
89 | return console.log(arguments);
90 | };
91 |
92 | exports.log = exports.nullLogger;
93 |
--------------------------------------------------------------------------------
/lib/instance.js:
--------------------------------------------------------------------------------
1 | var Instance, _, chainable, helpers,
2 | hasProp = {}.hasOwnProperty;
3 |
4 | _ = require('../lib/lodash.js');
5 |
6 | chainable = (helpers = require('./helpers')).chainable;
7 |
8 | module.exports = Instance = (function() {
9 | function Instance(template, Transparency) {
10 | this.Transparency = Transparency;
11 | this.queryCache = {};
12 | this.childNodes = _.toArray(template.childNodes);
13 | this.elements = helpers.getElements(template);
14 | }
15 |
16 | Instance.prototype.remove = chainable(function() {
17 | var i, len, node, ref, results;
18 | ref = this.childNodes;
19 | results = [];
20 | for (i = 0, len = ref.length; i < len; i++) {
21 | node = ref[i];
22 | results.push(node.parentNode.removeChild(node));
23 | }
24 | return results;
25 | });
26 |
27 | Instance.prototype.appendTo = chainable(function(parent) {
28 | var i, len, node, ref, results;
29 | ref = this.childNodes;
30 | results = [];
31 | for (i = 0, len = ref.length; i < len; i++) {
32 | node = ref[i];
33 | results.push(parent.appendChild(node));
34 | }
35 | return results;
36 | });
37 |
38 | Instance.prototype.prepare = chainable(function(model) {
39 | var element, i, len, ref, results;
40 | ref = this.elements;
41 | results = [];
42 | for (i = 0, len = ref.length; i < len; i++) {
43 | element = ref[i];
44 | element.reset();
45 | results.push(helpers.data(element.el).model = model);
46 | }
47 | return results;
48 | });
49 |
50 | Instance.prototype.renderValues = chainable(function(model, children) {
51 | var element, key, results, value;
52 | if (_.isElement(model) && (element = this.elements[0])) {
53 | return element.empty().el.appendChild(model);
54 | } else if (typeof model === 'object') {
55 | results = [];
56 | for (key in model) {
57 | if (!hasProp.call(model, key)) continue;
58 | value = model[key];
59 | if (value != null) {
60 | if (_.isString(value) || _.isNumber(value) || _.isBoolean(value) || _.isDate(value)) {
61 | results.push((function() {
62 | var i, len, ref, results1;
63 | ref = this.matchingElements(key);
64 | results1 = [];
65 | for (i = 0, len = ref.length; i < len; i++) {
66 | element = ref[i];
67 | results1.push(element.render(value));
68 | }
69 | return results1;
70 | }).call(this));
71 | } else if (typeof value === 'object') {
72 | results.push(children.push(key));
73 | } else {
74 | results.push(void 0);
75 | }
76 | }
77 | }
78 | return results;
79 | }
80 | });
81 |
82 | Instance.prototype.renderDirectives = chainable(function(model, index, directives) {
83 | var attributes, element, key, results;
84 | results = [];
85 | for (key in directives) {
86 | if (!hasProp.call(directives, key)) continue;
87 | attributes = directives[key];
88 | if (!(typeof attributes === 'object')) {
89 | continue;
90 | }
91 | if (typeof model !== 'object') {
92 | model = {
93 | value: model
94 | };
95 | }
96 | results.push((function() {
97 | var i, len, ref, results1;
98 | ref = this.matchingElements(key);
99 | results1 = [];
100 | for (i = 0, len = ref.length; i < len; i++) {
101 | element = ref[i];
102 | results1.push(element.renderDirectives(model, index, attributes));
103 | }
104 | return results1;
105 | }).call(this));
106 | }
107 | return results;
108 | });
109 |
110 | Instance.prototype.renderChildren = chainable(function(model, children, directives, options) {
111 | var element, i, key, len, results;
112 | results = [];
113 | for (i = 0, len = children.length; i < len; i++) {
114 | key = children[i];
115 | results.push((function() {
116 | var j, len1, ref, results1;
117 | ref = this.matchingElements(key);
118 | results1 = [];
119 | for (j = 0, len1 = ref.length; j < len1; j++) {
120 | element = ref[j];
121 | results1.push(this.Transparency.render(element.el, model[key], directives[key], options));
122 | }
123 | return results1;
124 | }).call(this));
125 | }
126 | return results;
127 | });
128 |
129 | Instance.prototype.matchingElements = function(key) {
130 | var base, el, elements;
131 | elements = (base = this.queryCache)[key] || (base[key] = (function() {
132 | var i, len, ref, results;
133 | ref = this.elements;
134 | results = [];
135 | for (i = 0, len = ref.length; i < len; i++) {
136 | el = ref[i];
137 | if (this.Transparency.matcher(el, key)) {
138 | results.push(el);
139 | }
140 | }
141 | return results;
142 | }).call(this));
143 | helpers.log("Matching elements for '" + key + "':", elements);
144 | return elements;
145 | };
146 |
147 | return Instance;
148 |
149 | })();
150 |
--------------------------------------------------------------------------------
/lib/lodash.js:
--------------------------------------------------------------------------------
1 | var _ = {};
2 |
3 | _.toString = Object.prototype.toString;
4 |
5 | _.toArray = function(obj) {
6 | var arr = new Array(obj.length);
7 | for (var i = 0; i < obj.length; i++) {
8 | arr[i] = obj[i];
9 | }
10 | return arr;
11 | };
12 |
13 | _.isString = function(obj) { return _.toString.call(obj) == '[object String]'; };
14 |
15 | _.isNumber = function(obj) { return _.toString.call(obj) == '[object Number]'; };
16 |
17 | _.isArray = Array.isArray || function(obj) {
18 | return _.toString.call(obj) === '[object Array]';
19 | };
20 |
21 | _.isDate = function(obj) {
22 | return _.toString.call(obj) === '[object Date]';
23 | };
24 |
25 | _.isElement = function(obj) {
26 | return !!(obj && obj.nodeType === 1);
27 | };
28 |
29 | _.isPlainValue = function(obj) {
30 | var type;
31 | type = typeof obj;
32 | return (type !== 'object' && type !== 'function') || exports.isDate(obj);
33 | };
34 |
35 | _.isBoolean = function(obj) {
36 | return obj === true || obj === false;
37 | };
38 |
39 | module.exports = _;
40 |
--------------------------------------------------------------------------------
/lib/transparency.js:
--------------------------------------------------------------------------------
1 | var $, Context, Transparency, _, helpers,
2 | indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
3 |
4 | _ = require('../lib/lodash.js');
5 |
6 | helpers = require('./helpers');
7 |
8 | Context = require('./context');
9 |
10 | Transparency = {};
11 |
12 | Transparency.render = function(context, models, directives, options) {
13 | var base, log;
14 | if (models == null) {
15 | models = [];
16 | }
17 | if (directives == null) {
18 | directives = {};
19 | }
20 | if (options == null) {
21 | options = {};
22 | }
23 | log = options.debug && console ? helpers.consoleLogger : helpers.nullLogger;
24 | log("Transparency.render:", context, models, directives, options);
25 | if (!context) {
26 | return;
27 | }
28 | if (!_.isArray(models)) {
29 | models = [models];
30 | }
31 | context = (base = helpers.data(context)).context || (base.context = new Context(context, Transparency));
32 | return context.render(models, directives, options).el;
33 | };
34 |
35 | Transparency.matcher = function(element, key) {
36 | return element.el.id === key || indexOf.call(element.classNames, key) >= 0 || element.el.name === key || element.el.getAttribute('data-bind') === key;
37 | };
38 |
39 | Transparency.clone = function(node) {
40 | return $(node).clone()[0];
41 | };
42 |
43 | Transparency.jQueryPlugin = helpers.chainable(function(models, directives, options) {
44 | var context, i, len, results;
45 | results = [];
46 | for (i = 0, len = this.length; i < len; i++) {
47 | context = this[i];
48 | results.push(Transparency.render(context, models, directives, options));
49 | }
50 | return results;
51 | });
52 |
53 | if ((typeof jQuery !== "undefined" && jQuery !== null) || (typeof Zepto !== "undefined" && Zepto !== null)) {
54 | $ = jQuery || Zepto;
55 | if ($ != null) {
56 | $.fn.render = Transparency.jQueryPlugin;
57 | }
58 | }
59 |
60 | if (typeof module !== "undefined" && module !== null ? module.exports : void 0) {
61 | module.exports = Transparency;
62 | }
63 |
64 | if (typeof window !== "undefined" && window !== null) {
65 | window.Transparency = Transparency;
66 | }
67 |
68 | if (typeof define !== "undefined" && define !== null ? define.amd : void 0) {
69 | define(function() {
70 | return Transparency;
71 | });
72 | }
73 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "transparency",
3 | "version": "1.0.0",
4 | "description": "Transparency is a minimal template engine for browsers. It maps JSON objects to DOM elements with zero configuration.",
5 | "homepage": "https://github.com/leonidas/transparency",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/leonidas/transparency.git"
9 | },
10 | "keywords": [
11 | "template",
12 | "templating",
13 | "engine",
14 | "unobtrusive",
15 | "semantic"
16 | ],
17 | "author": "Jarno Keskikangas ').render hello: "World!"
19 | done()
20 |
21 | it "should work even if the $ is not in the global namespace", (done) ->
22 | require ['dist/transparency'], (t) ->
23 | $.noConflict();
24 | jQuery.fn.render = t.jQueryPlugin
25 | jQuery('
').render hello: "World!" 26 | window.$ = jQuery 27 | done() 28 | -------------------------------------------------------------------------------- /spec/amdSpec.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | require.config({ 3 | baseUrl: '..' 4 | }); 5 | 6 | describe("Transparency with AMD loader", function() { 7 | it("should bind Transparency to a named variable", function(done) { 8 | return require(['dist/transparency'], function(t) { 9 | expect(t).toBeDefined(); 10 | return done(); 11 | }); 12 | }); 13 | it("should define window.Transparency", function(done) { 14 | return require(['dist/transparency'], function(t) { 15 | expect(window.Transparency).toBeDefined(); 16 | return done(); 17 | }); 18 | }); 19 | it("should provide a jQuery plugin", function(done) { 20 | return require(['dist/transparency'], function(t) { 21 | $.fn.render = t.jQueryPlugin; 22 | $('
').render({
23 | hello: "World!"
24 | });
25 | return done();
26 | });
27 | });
28 | return it("should work even if the $ is not in the global namespace", function(done) {
29 | return require(['dist/transparency'], function(t) {
30 | $.noConflict();
31 | jQuery.fn.render = t.jQueryPlugin;
32 | jQuery('
').render({ 33 | hello: "World!" 34 | }); 35 | window.$ = jQuery; 36 | return done(); 37 | }); 38 | }); 39 | }); 40 | 41 | }).call(this); 42 | -------------------------------------------------------------------------------- /spec/amdSpecRunner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
14 |
15 |
16 |
17 | """
18 |
19 | data = null
20 |
21 | expected = $ """
22 |
23 |
24 | """
25 |
26 | template.render data
27 | expect(template).toBeEqual expected
28 |
29 | # Assert that the template is still available
30 | data =
31 | hello: 'Hello'
32 |
33 | expected = $ """
34 |
35 |
38 | """
39 |
40 | template.render data
41 | expect(template).toBeEqual expected
42 |
43 | it "should ignore null values", ->
44 | template = $ """
45 | Hello
36 |
37 |
46 |
47 |
48 |
49 | """
50 |
51 | data =
52 | hello: 'Hello'
53 | goodbye: null
54 |
55 | expected = $ """
56 |
57 |
60 | """
61 |
62 | template.render data
63 | expect(template).toBeEqual expected
64 |
65 | it "should match model keys to template by element id, class, name attribute and data-bind attribute", ->
66 | template = $ """
67 | Hello
58 |
59 |
68 |
69 |
70 |
71 |
72 |
73 | """
74 |
75 | data =
76 | 'my-id': 'id-data'
77 | 'my-class': 'class-data'
78 | 'my-name': 'name-data'
79 | 'my-data' : 'data-bind'
80 |
81 | expected = $ """
82 |
83 |
88 | """
89 |
90 | template.render data
91 | expect(template).toBeEqual expected
92 |
93 | it "should handle nested templates", ->
94 | template = $ """
95 | id-data
84 | class-data
85 |
86 | data-bind
87 |
96 |
101 | """
102 |
103 | data =
104 | greeting: 'Hello'
105 | name: 'World'
106 |
107 | expected = $ """
108 |
97 |
98 |
99 |
100 |
109 |
113 | """
114 |
115 | template.render data
116 | expect(template).toBeEqual expected
117 |
118 | it "should handle numeric values", ->
119 | template = $ """
120 | HelloWorld
110 |
112 | Hello
111 |
121 |
122 |
123 |
124 | """
125 |
126 | data =
127 | hello: 'Hello'
128 | goodbye: 5
129 |
130 | expected = $ """
131 |
132 |
135 | """
136 |
137 | template.render data
138 | expect(template).toBeEqual expected
139 |
140 | it "should handle DOM elements as models", ->
141 | template = $ """
142 | Hello
133 | 5
134 |
143 |
144 |
147 |
148 | """
149 |
150 | # Few widget elements. In reality these would be created other by Backbone views.
151 | widget1 = $("First
")[0]
152 | widget2 = $("Second
")[0]
153 |
154 | data =
155 | title: "Some widgets"
156 | widgets: [widget1, widget2]
157 |
158 | expected = $ """
159 |
160 |
170 | """
171 |
172 | template.render data
173 | expect(template).toBeEqual expected
174 |
175 | it "should convert date objects to strings", ->
176 | template = $ """
177 | Some widgets
161 | 169 |
178 |
179 |
180 | """
181 |
182 | data =
183 | best_before: new Date 0
184 |
185 | expected = $ """
186 |
187 |
189 | """
190 |
191 | template.render data
192 | expect(template).toBeEqual expected
193 |
194 | it "should ignore functions in models", ->
195 | template = $ """
196 | #{(new Date 0).toString()}
188 |
197 |
198 |
199 |
200 |
201 | """
202 |
203 | data =
204 | hello: 'Hello'
205 | goodbye: 5
206 | skipped: () -> "hello"
207 |
208 | expected = $ """
209 |
210 |
214 | """
215 |
216 | template.render data
217 | expect(template).toBeEqual expected
218 |
219 | it "should preserve text between template elements", ->
220 | template = $ """
221 | Hello
211 | 5
212 |
213 |
242 | 234
243 | foo
244 | 1.234
245 | abc
246 |
247 | """
248 |
249 | data =
250 | number: 0
251 | bool: false
252 | dec: 0.0
253 | str: ""
254 |
255 | expected = $ """
256 |
257 | 0
258 | false
259 | 0
260 |
261 |
262 | """
263 |
264 | template.render data
265 | expect(template).toBeEqual expected
266 |
267 | it "should not render text content to img tags and other void elements", ->
268 | # See https://github.com/leonidas/transparency/issues/82
269 |
270 | template = $ """
271 |
272 |
273 | ![]()
274 |
275 | """
276 |
277 | data = [
278 | name: 'gal1'
279 | image: 'http://example.com/image_name_1'
280 | ,
281 | name: 'gal2'
282 | image: 'http://example.com/image_name_2'
283 | ]
284 |
285 | directives =
286 | name: text: -> @name
287 | image: src: -> @image
288 |
289 | expected = $ """
290 |
291 | gal1
292 | 
293 | gal2
294 | 
295 |
296 | """
297 |
298 | template.render data, directives
299 | expect(template).toBeEqual expected
300 |
--------------------------------------------------------------------------------
/spec/basicsSpec.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | describe("Transparency", function() {
3 | it("should ignore null context", function() {
4 | var data, expected, template;
5 | template = $('');
6 | data = {
7 | hello: 'Hello'
8 | };
9 | expected = $('');
10 | window.Transparency.render(template.find('#not_found')[0], data);
11 | return expect(template).toBeEqual(expected);
12 | });
13 | it("should render empty container for null data", function() {
14 | var data, expected, template;
15 | template = jQuery("\n \n \n
");
16 | data = null;
17 | expected = $("\n
");
18 | template.render(data);
19 | expect(template).toBeEqual(expected);
20 | data = {
21 | hello: 'Hello'
22 | };
23 | expected = $("\n
");
24 | template.render(data);
25 | return expect(template).toBeEqual(expected);
26 | });
27 | it("should ignore null values", function() {
28 | var data, expected, template;
29 | template = $("Hello
\n \n\n \n \n
");
30 | data = {
31 | hello: 'Hello',
32 | goodbye: null
33 | };
34 | expected = $("\n
");
35 | template.render(data);
36 | return expect(template).toBeEqual(expected);
37 | });
38 | it("should match model keys to template by element id, class, name attribute and data-bind attribute", function() {
39 | var data, expected, template;
40 | template = $("Hello
\n \n\n \n \n \n \n
");
41 | data = {
42 | 'my-id': 'id-data',
43 | 'my-class': 'class-data',
44 | 'my-name': 'name-data',
45 | 'my-data': 'data-bind'
46 | };
47 | expected = $("\n
");
48 | template.render(data);
49 | return expect(template).toBeEqual(expected);
50 | });
51 | it("should handle nested templates", function() {
52 | var data, expected, template;
53 | template = $("id-data
\n class-data
\n \n data-bind
\n\n
");
54 | data = {
55 | greeting: 'Hello',
56 | name: 'World'
57 | };
58 | expected = $("\n \n \n
\n\n
");
59 | template.render(data);
60 | return expect(template).toBeEqual(expected);
61 | });
62 | it("should handle numeric values", function() {
63 | var data, expected, template;
64 | template = $("HelloWorld\n
\nHello
\n \n \n \n
");
65 | data = {
66 | hello: 'Hello',
67 | goodbye: 5
68 | };
69 | expected = $("\n
");
70 | template.render(data);
71 | return expect(template).toBeEqual(expected);
72 | });
73 | it("should handle DOM elements as models", function() {
74 | var data, expected, template, widget1, widget2;
75 | template = $("Hello
\n 5
\n\n \n \n
");
76 | widget1 = $("First
")[0];
77 | widget2 = $("Second
")[0];
78 | data = {
79 | title: "Some widgets",
80 | widgets: [widget1, widget2]
81 | };
82 | expected = $("\n
");
83 | template.render(data);
84 | return expect(template).toBeEqual(expected);
85 | });
86 | it("should convert date objects to strings", function() {
87 | var data, expected, template;
88 | template = $("Some widgets
\n \n\n \n
");
89 | data = {
90 | best_before: new Date(0)
91 | };
92 | expected = $("\n
");
93 | template.render(data);
94 | return expect(template).toBeEqual(expected);
95 | });
96 | it("should ignore functions in models", function() {
97 | var data, expected, template;
98 | template = $("" + ((new Date(0)).toString()) + "
\n\n \n \n \n
");
99 | data = {
100 | hello: 'Hello',
101 | goodbye: 5,
102 | skipped: function() {
103 | return "hello";
104 | }
105 | };
106 | expected = $("\n
");
107 | template.render(data);
108 | return expect(template).toBeEqual(expected);
109 | });
110 | it("should preserve text between template elements", function() {
111 | var data, expected, template;
112 | template = $("Hello
\n 5
\n \n\n 234\n foo\n 1.234\n abc\n
");
124 | data = {
125 | number: 0,
126 | bool: false,
127 | dec: 0.0,
128 | str: ""
129 | };
130 | expected = $("\n 0\n false\n 0\n \n
");
131 | template.render(data);
132 | return expect(template).toBeEqual(expected);
133 | });
134 | return it("should not render text content to img tags and other void elements", function() {
135 | var data, directives, expected, template;
136 | template = $("\n \n ![\"\"](\"\")
\n
");
137 | data = [
138 | {
139 | name: 'gal1',
140 | image: 'http://example.com/image_name_1'
141 | }, {
142 | name: 'gal2',
143 | image: 'http://example.com/image_name_2'
144 | }
145 | ];
146 | directives = {
147 | name: {
148 | text: function() {
149 | return this.name;
150 | }
151 | },
152 | image: {
153 | src: function() {
154 | return this.image;
155 | }
156 | }
157 | };
158 | expected = $("\n gal1\n ![\"\"](\"http://example.com/image_name_1\")
\n gal2\n ![\"\"](\"http://example.com/image_name_2\")
\n
");
159 | template.render(data, directives);
160 | return expect(template).toBeEqual(expected);
161 | });
162 | });
163 |
164 | }).call(this);
165 |
--------------------------------------------------------------------------------
/spec/cachedTemplatesSpec.coffee:
--------------------------------------------------------------------------------
1 | describe "Transparency", ->
2 |
3 | it "cache templates", ->
4 | doc = $ """
5 |
6 |
13 | """
14 |
15 | data = [
16 | hello: "Hello"
17 | world: "World!"
18 | ,
19 | hello: "Goodbye"
20 | world: "Canada!"
21 | ]
22 |
23 | expected = $ """
24 |
7 |
12 |
8 |
9 |
10 |
11 |
25 |
36 | """
37 |
38 | doc.find('.container').render(data)
39 | doc.find('.container').render(data)
40 | expect(doc).toBeEqual(expected)
41 |
--------------------------------------------------------------------------------
/spec/cachedTemplatesSpec.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | describe("Transparency", function() {
3 | return it("cache templates", function() {
4 | var data, doc, expected;
5 | doc = $("
26 |
35 |
27 | Hello
28 | World!
29 |
30 |
31 | Goodbye
32 | Canada!
33 |
34 | \n
");
6 | data = [
7 | {
8 | hello: "Hello",
9 | world: "World!"
10 | }, {
11 | hello: "Goodbye",
12 | world: "Canada!"
13 | }
14 | ];
15 | expected = $("\n
\n\n \n \n
\n \n
");
16 | doc.find('.container').render(data);
17 | doc.find('.container').render(data);
18 | return expect(doc).toBeEqual(expected);
19 | });
20 | });
21 |
22 | }).call(this);
23 |
--------------------------------------------------------------------------------
/spec/configSpec.coffee:
--------------------------------------------------------------------------------
1 | describe "Transparency", ->
2 |
3 | it "should use a custom matcher if available", ->
4 | template = $ """
5 | \n
\n\n Hello\n World!\n
\n \n Goodbye\n Canada!\n
\n
6 |
7 |
8 |
15 | """
16 |
17 | data =
18 | title: 'Hello World'
19 | post: 'Hi there it is me'
20 | comments: [
21 | name: 'John'
22 | text: 'That rules'
23 | ,
24 | name: 'Arnold'
25 | text: 'Great post!'
26 | ]
27 |
28 | data_bind_matcher = (element, key) ->
29 | element.el.getAttribute('data-bind') == key
30 |
31 | expected_with_custom_matcher = $ """
32 |
9 |
14 |
10 |
11 |
12 |
13 |
33 |
46 | """
47 |
48 | default_matcher = window.Transparency.matcher
49 | window.Transparency.matcher = data_bind_matcher
50 |
51 | template.render data
52 | expect(template).toBeEqual expected_with_custom_matcher
53 | window.Transparency.matcher = default_matcher
54 |
--------------------------------------------------------------------------------
/spec/configSpec.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | describe("Transparency", function() {
3 | return it("should use a custom matcher if available", function() {
4 | var data, data_bind_matcher, default_matcher, expected_with_custom_matcher, template;
5 | template = $("Hello World
34 | 35 |
36 |
45 |
37 |
38 | That rules
39 |
40 |
41 |
42 | Great post!
43 |
44 | \n \n \n
");
6 | data = {
7 | title: 'Hello World',
8 | post: 'Hi there it is me',
9 | comments: [
10 | {
11 | name: 'John',
12 | text: 'That rules'
13 | }, {
14 | name: 'Arnold',
15 | text: 'Great post!'
16 | }
17 | ]
18 | };
19 | data_bind_matcher = function(element, key) {
20 | return element.el.getAttribute('data-bind') === key;
21 | };
22 | expected_with_custom_matcher = $("\n
\n \n \n \n
\n \n
");
23 | default_matcher = window.Transparency.matcher;
24 | window.Transparency.matcher = data_bind_matcher;
25 | template.render(data);
26 | expect(template).toBeEqual(expected_with_custom_matcher);
27 | return window.Transparency.matcher = default_matcher;
28 | });
29 | });
30 |
31 | }).call(this);
32 |
--------------------------------------------------------------------------------
/spec/formsSpec.coffee:
--------------------------------------------------------------------------------
1 | describe "Transparency", ->
2 |
3 | it "should render values to form inputs and textarea elements", ->
4 | template = $ """
5 | Hello World
\n \n\n
\n\n \n That rules\n
\n \n \n Great post!\n
\n
6 |
7 |
8 |
9 |
10 | """
11 |
12 | data =
13 | name: 'John'
14 | job: 'Milkman'
15 | resume: "Jack of all trades"
16 |
17 | expected = $ """
18 |
19 |
20 |
21 |
22 |
23 | """
24 |
25 | # Needed for IE
26 | expected.find('textarea').val 'Jack of all trades'
27 | template.render data
28 | expect(template).toBeEqual expected
29 |
30 | it "should render values to option elements", ->
31 | template = $ """
32 |
35 | """
36 |
37 | data = [
38 | id: 1
39 | state: 'Alabama'
40 | ,
41 | id: 2
42 | state: 'Alaska'
43 | ,
44 | id: 3
45 | state: 'Arizona'
46 | ]
47 |
48 | directives = state: value: -> @id
49 |
50 | expected = $ """
51 |
56 | """
57 |
58 | template.render data, directives
59 | template.children().first().prop 'selected', true
60 | expect(template).toBeEqual expected
61 |
62 | it "should render list of options and set the selected", ->
63 | template = $ """
64 |
67 | """
68 |
69 | data = [
70 | id:1, name:"First"
71 | ,
72 | id:2, name:"Second"
73 | ,
74 | id:3, name:"Third"
75 | ]
76 |
77 | directives =
78 | bar:
79 | value: -> @id
80 | text: -> @name
81 | selected: -> true
82 |
83 | expected = $ """
84 |
89 | """
90 |
91 | template.render data, directives
92 | expect(template).toBeEqual expected
93 |
94 | it "should set the matching option to 'selected' in case the target element is 'select'", ->
95 | template = $ """
96 |
97 |
102 |
103 | """
104 |
105 | data = state: 2
106 |
107 | expected = $ """
108 |
109 |
114 |
115 | """
116 |
117 | template.render data
118 | expect(template).toBeEqual expected
119 |
120 | it "should handle nested options elements", ->
121 | template = $ """
122 |
123 |
124 |
125 |
128 |
129 | """
130 |
131 | data =
132 | title: 'Hello World'
133 | post: 'Hi there it is me'
134 | comments: [
135 | comment: 'John'
136 | , comment: 'Arnold'
137 | ]
138 |
139 | expected = $ """
140 |
141 |
148 | """
149 |
150 | template.render data
151 | expect(template).toBeEqual expected
152 |
153 | it "should render checkbox and radiobutton checked attributes", ->
154 | template = $ """
155 | Hello World
142 |Hi there it is me
143 | 147 |
156 |
157 |
158 |
159 |
160 |
161 | """
162 |
163 | data =
164 | foo: true
165 | foz: false
166 | bar: true
167 | baz: false
168 |
169 | expected = $ """
170 |
171 |
172 |
173 |
174 |
175 |
176 | """
177 |
178 | template.render data
179 | expect(template).toBeEqual expected
180 |
181 |
--------------------------------------------------------------------------------
/spec/formsSpec.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | describe("Transparency", function() {
3 | it("should render values to form inputs and textarea elements", function() {
4 | var data, expected, template;
5 | template = $("\n \n \n \n
");
6 | data = {
7 | name: 'John',
8 | job: 'Milkman',
9 | resume: "Jack of all trades"
10 | };
11 | expected = $("\n \n \n \n
");
12 | expected.find('textarea').val('Jack of all trades');
13 | template.render(data);
14 | return expect(template).toBeEqual(expected);
15 | });
16 | it("should render values to option elements", function() {
17 | var data, directives, expected, template;
18 | template = $("");
19 | data = [
20 | {
21 | id: 1,
22 | state: 'Alabama'
23 | }, {
24 | id: 2,
25 | state: 'Alaska'
26 | }, {
27 | id: 3,
28 | state: 'Arizona'
29 | }
30 | ];
31 | directives = {
32 | state: {
33 | value: function() {
34 | return this.id;
35 | }
36 | }
37 | };
38 | expected = $("");
39 | template.render(data, directives);
40 | template.children().first().prop('selected', true);
41 | return expect(template).toBeEqual(expected);
42 | });
43 | it("should render list of options and set the selected", function() {
44 | var data, directives, expected, template;
45 | template = $("");
46 | data = [
47 | {
48 | id: 1,
49 | name: "First"
50 | }, {
51 | id: 2,
52 | name: "Second"
53 | }, {
54 | id: 3,
55 | name: "Third"
56 | }
57 | ];
58 | directives = {
59 | bar: {
60 | value: function() {
61 | return this.id;
62 | },
63 | text: function() {
64 | return this.name;
65 | },
66 | selected: function() {
67 | return true;
68 | }
69 | }
70 | };
71 | expected = $("");
72 | template.render(data, directives);
73 | return expect(template).toBeEqual(expected);
74 | });
75 | it("should set the matching option to 'selected' in case the target element is 'select'", function() {
76 | var data, expected, template;
77 | template = $("\n \n
");
78 | data = {
79 | state: 2
80 | };
81 | expected = $("\n \n
");
82 | template.render(data);
83 | return expect(template).toBeEqual(expected);
84 | });
85 | it("should handle nested options elements", function() {
86 | var data, expected, template;
87 | template = $("\n \n \n \n
");
88 | data = {
89 | title: 'Hello World',
90 | post: 'Hi there it is me',
91 | comments: [
92 | {
93 | comment: 'John'
94 | }, {
95 | comment: 'Arnold'
96 | }
97 | ]
98 | };
99 | expected = $("\n
");
100 | template.render(data);
101 | return expect(template).toBeEqual(expected);
102 | });
103 | return it("should render checkbox and radiobutton checked attributes", function() {
104 | var data, expected, template;
105 | template = $("Hello World
\nHi there it is me
\n \n\n \n \n \n \n
");
106 | data = {
107 | foo: true,
108 | foz: false,
109 | bar: true,
110 | baz: false
111 | };
112 | expected = $("\n \n \n \n \n
");
113 | template.render(data);
114 | return expect(template).toBeEqual(expected);
115 | });
116 | });
117 |
118 | }).call(this);
119 |
--------------------------------------------------------------------------------
/spec/functionalSpecRunner.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 | """
11 |
12 | data = [
13 | name: 'John'
14 | text: 'That rules'
15 | ,
16 | name: 'Arnold'
17 | text: 'Great post!'
18 | ]
19 |
20 | expected = $ """
21 |
7 |
8 |
9 |
22 |
28 | """
29 |
30 | template.render data
31 | expect(template).toBeEqual expected
32 | expect(template.find('.comment')[0].transparency.model).toEqual(data[0])
33 | expectModelObjects template.find('.comment'), data
34 |
35 | it "should render empty lists", ->
36 | template = $ """
37 |
23 | JohnThat rules
24 |
25 | ArnoldGreat post!
26 |
27 |
38 |
43 | """
44 |
45 | data = []
46 |
47 | expected = $ """
48 |
39 |
40 |
41 |
42 |
49 |
50 | """
51 |
52 | template.render data
53 | expect(template).toBeEqual expected
54 |
55 | it "should render lists with duplicate content", ->
56 | template = $ """
57 |
58 |
59 |
60 | """
61 |
62 | data = [
63 | name: "Same"
64 | , name: "Same"
65 | ]
66 |
67 | expected = $ """
68 |
69 |
72 | """
73 |
74 | template.render data
75 | expect(template).toBeEqual expected
76 |
77 | it "should render plain values with 'this' directives", ->
78 | template = $ """
79 | Same
70 | Same
71 |
80 |
81 |
82 |
83 | """
84 |
85 | data = ["That rules", "Great post!", 5]
86 | directives = comment: text: -> this.value
87 |
88 | expected = $ """
89 |
90 |
91 | That rules
92 |
93 | Great post!
94 |
95 | 5
96 |
97 | """
98 |
99 | template.render data, directives
100 | expect(template).toBeEqual expected
101 | #expectModelObjects template.find('.listElement'), data
102 |
103 | it "should not fail when there's no child node in the simple list template", ->
104 | template = $ """
105 |
106 |
107 | """
108 |
109 | data = ["That rules", "Great post!"]
110 |
111 | expected = $ """
112 |
113 |
114 | """
115 |
116 | template.find('.comments').render data
117 | expect(template).toBeEqual(expected)
118 |
119 | it "should match table rows to the number of model objects", ->
120 | template = $ """
121 | | foobar | 125 |
| user1 | 136 |
| user2 | 139 |
| user1 | 150 |
| user1 | 161 |
| user3 | 164 |
| user4 | 175 |
| user3 | 178 |
\n
");
8 | data = [
9 | {
10 | name: 'John',
11 | text: 'That rules'
12 | }, {
13 | name: 'Arnold',
14 | text: 'Great post!'
15 | }
16 | ];
17 | expected = $("\n \n
\n\n
");
18 | template.render(data);
19 | expect(template).toBeEqual(expected);
20 | expect(template.find('.comment')[0].transparency.model).toEqual(data[0]);
21 | return expectModelObjects(template.find('.comment'), data);
22 | });
23 | it("should render empty lists", function() {
24 | var data, expected, template;
25 | template = $("\n JohnThat rules\n
\n ArnoldGreat post!\n
\n\n
");
26 | data = [];
27 | expected = $("\n \n \n
\n\n
");
28 | template.render(data);
29 | return expect(template).toBeEqual(expected);
30 | });
31 | it("should render lists with duplicate content", function() {
32 | var data, expected, template;
33 | template = $("\n \n
");
34 | data = [
35 | {
36 | name: "Same"
37 | }, {
38 | name: "Same"
39 | }
40 | ];
41 | expected = $("\n
");
42 | template.render(data);
43 | return expect(template).toBeEqual(expected);
44 | });
45 | it("should render plain values with 'this' directives", function() {
46 | var data, directives, expected, template;
47 | template = $("Same
\n Same
\n\n \n \n
");
48 | data = ["That rules", "Great post!", 5];
49 | directives = {
50 | comment: {
51 | text: function() {
52 | return this.value;
53 | }
54 | }
55 | };
56 | expected = $("\n \n That rules\n \n Great post!\n \n 5\n
");
57 | template.render(data, directives);
58 | return expect(template).toBeEqual(expected);
59 | });
60 | it("should not fail when there's no child node in the simple list template", function() {
61 | var data, expected, template;
62 | template = $("\n
");
63 | data = ["That rules", "Great post!"];
64 | expected = $("\n
");
65 | template.find('.comments').render(data);
66 | return expect(template).toBeEqual(expected);
67 | });
68 | return it("should match table rows to the number of model objects", function() {
69 | var template;
70 | template = $("| foobar | \n
| user1 | \n
| user2 | \n
| user1 | \n
| user1 | \n
| user3 | \n
| user4 | \n
| user3 | \n
6 |
7 | \n Moar text
\n");
6 | data = [
7 | {
8 | name: 'Foo'
9 | }, {
10 | name: 'Bar'
11 | }
12 | ];
13 | directives = {
14 | name: {
15 | text: function(params) {
16 | expect(data[params.index]).toEqual(params.element.transparency.model);
17 | return this.name;
18 | }
19 | }
20 | };
21 | template.render(data, directives);
22 | ref = template.find('li');
23 | results = [];
24 | for (i = j = 0, len = ref.length; j < len; i = ++j) {
25 | li = ref[i];
26 | results.push((function() {
27 | var k, len1, ref1, results1;
28 | ref1 = $(li).add('*', li);
29 | results1 = [];
30 | for (k = 0, len1 = ref1.length; k < len1; k++) {
31 | element = ref1[k];
32 | results1.push(expect(data[i]).toEqual(element.transparency.model));
33 | }
34 | return results1;
35 | })());
36 | }
37 | return results;
38 | });
39 | });
40 |
41 | }).call(this);
42 |
--------------------------------------------------------------------------------
/spec/performanceSpec.coffee:
--------------------------------------------------------------------------------
1 | describe "Transparency performance", ->
2 | @timeout 30000
3 |
4 | describe "with cached templates", ->
5 |
6 | describe "with one todo item", ->
7 |
8 | it "should be on the same ballpark with Handlebars", (done) ->
9 | transparency = new Benchmark 'transparency - cached template, one todo',
10 | setup: ->
11 | template = $('')[0]
12 | index = 0
13 | data = ({todo: Math.random()} for i in [1..@count])
14 | Transparency.render template, {todo: Math.random()}
15 | return
16 |
17 | fn: ->
18 | Transparency.render template, data[index++]
19 | return
20 |
21 | handlebars = new Benchmark 'handlebars - compiled and cached template, one todo',
22 | setup: ->
23 | parser = $('')[0]
24 | template = Handlebars.compile('
{{todo}}
')[0]
47 | index = 0
48 | data = for i in [1..@count]
49 | for j in [1..100]
50 | {todo: Math.random()}
51 | Transparency.render template, ({todo: Math.random()} for j in [1..100])
52 | return
53 |
54 | fn: ->
55 | Transparency.render template, data[index++]
56 | return
57 |
58 | handlebars = new Benchmark 'handlebars - compiled and cached template, 100 todos',
59 | setup: ->
60 | parser = $('')[0]
61 | template = Handlebars.compile('
{{#each this}}
')
62 | index = 0
63 | data = for i in [1..@count]
64 | for j in [1..100]
65 | {todo: Math.random()}
66 | return
67 |
68 | fn: ->
69 | parser.innerHTML = template data[index++]
70 | return
71 |
72 | new Benchmark.Suite()
73 | .add(transparency)
74 | .add(handlebars)
75 |
76 | .on('complete', ->
77 | expect(this[0]).toBeOnTheSameBallpark(this[1], 5))
78 | .run()
79 |
80 | describe "on first render call", ->
81 |
82 | describe "with one todo item", ->
83 |
84 | it "should be on the same ballpark with Handlebars", ->
85 | transparency = new Benchmark 'transparency - unused template, one todo',
86 | setup: ->
87 | template = for i in [1..@count]
88 | $('{{todo}}
{{/each}}')[0]
89 | index = 0
90 | data = ({todo: Math.random()} for i in [1..@count])
91 | return
92 |
93 | fn: ->
94 | Transparency.render template[index], data[index++]
95 | return
96 |
97 | handlebars = new Benchmark 'handlebars - unused and compiled template, one todo',
98 | setup: ->
99 | parser = for i in [1..@count]
100 | $('')[0]
101 | template = for i in [1..@count]
102 | Handlebars.compile('
{{todo}}
')[0]
126 | index = 0
127 | data = for i in [1..@count]
128 | for j in [1..100]
129 | {todo: Math.random()}
130 | return
131 |
132 | fn: ->
133 | Transparency.render template[index], data[index++]
134 | return
135 |
136 | handlebars = new Benchmark 'handlebars - unused and compiled template, 100 todos',
137 | setup: ->
138 | parser = for i in [1..@count]
139 | $('')[0]
140 | template = for i in [1..@count]
141 | Handlebars.compile('
{{#each this}}
')
142 | index = 0
143 | data = for i in [1..@count]
144 | for j in [1..100]
145 | {todo: Math.random()}
146 | return
147 |
148 | fn: ->
149 | parser[index].innerHTML = template[index] data[index++]
150 | return
151 |
152 | new Benchmark.Suite()
153 | .add(transparency)
154 | .add(handlebars)
155 |
156 | .on('complete', ->
157 | expect(this[0]).toBeOnTheSameBallpark(this[1], 7))
158 | .run()
159 |
--------------------------------------------------------------------------------
/spec/performanceSpecRunner.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{todo}}
{{/each}}
16 |
17 |
18 | """
19 |
20 | data = hello: 'Hello'
21 |
22 | expected = document.createElement 'div'
23 | expected.innerHTML =
24 | """
25 |
26 |
28 | """
29 |
30 | Transparency.render template, data
31 | expect(template.innerHTML).toEqual expected.innerHTML
32 | done()
33 |
--------------------------------------------------------------------------------
/spec/serverSpec.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | var Transparency, expect, jsdom;
3 |
4 | jsdom = require("jsdom").jsdom;
5 |
6 | expect = require("./assert").expect;
7 |
8 | Transparency = require("../index");
9 |
10 | describe("Transparency", function() {
11 | return it("should work on node.js", function(done) {
12 | return jsdom.env("", [], function(errors, arg) {
13 | var data, document, expected, template;
14 | document = arg.document;
15 | template = document.createElement('div');
16 | template.innerHTML = "Hello
27 | \n \n
";
17 | data = {
18 | hello: 'Hello'
19 | };
20 | expected = document.createElement('div');
21 | expected.innerHTML = "\n
";
22 | Transparency.render(template, data);
23 | expect(template.innerHTML).toEqual(expected.innerHTML);
24 | return done();
25 | });
26 | });
27 | });
28 |
29 | }).call(this);
30 |
--------------------------------------------------------------------------------
/spec/testlingSpecRunner.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Hello
\n
60 | # ",
4 | "wait_for_text": "You can now access your local server(s) in our remote browser"
5 | },
6 |
7 | "test_page": "spec/SpecRunner.html",
8 |
9 | "launchers": {
10 | "bs_ie_10": {
11 | "command": "browserstack launch --attach ie:10.0 ",
12 | "protocol": "browser"
13 | },
14 | "bs_ie_9": {
15 | "command": "browserstack launch --attach ie:9.0 ",
16 | "protocol": "browser"
17 | },
18 | "bs_ie_8": {
19 | "command": "browserstack launch --attach ie:8.0 ",
20 | "protocol": "browser"
21 | },
22 | "bs_ie_7": {
23 | "command": "browserstack launch --attach ie:7.0 ",
24 | "protocol": "browser"
25 | },
26 | "bs_ie_6": {
27 | "command": "browserstack launch --attach ie:6.0 ",
28 | "protocol": "browser"
29 | }
30 | },
31 |
32 | "launch_in_dev": ["Chrome", "Safari", "Firefox", "PhantomJS", "bs_ie_7", "bs_ie_8", "bs_ie_9", "bs_ie_10"]
33 | }
34 |
--------------------------------------------------------------------------------
/testlingSpecRunner.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Mocha Tests
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
Do some OSS
61 | #
62 | #
66 | #
67 | #
68 | element.render value
69 |
70 | # Rendering nested models breadth-first is more robust, as there might be colliding keys,
71 | # i.e., given a model
72 | #
73 | # {
74 | # name: "Jack",
75 | # friends: [
76 | # {name: "Matt"},
77 | # {name: "Carol"}
78 | # ]
79 | # }
80 | #
81 | # and a template
82 | #
83 | #
84 | #
85 | #
89 | #
90 | # the depth-first rendering might give us wrong results, if the children are rendered
91 | # before the `name` field on the parent model (child template values are overwritten by the parent).
92 | #
93 | #
86 | #
87 | #
88 | #
94 | #
100 | #
101 | # Save the key of the child model and take care of it once
102 | # we're done with the parent model.
103 | else if typeof value == 'object'
104 | children.push key
105 |
106 | # With `directives`, user can give explicit rules for rendering and set
107 | # attributes, which would be potentially unsafe by default (e.g., unescaped HTML content or `src` attribute).
108 | # Given a template
109 | #
110 | # Jack
95 | #
96 | #
99 | # Jack
97 | # Jack
98 | #
111 | #
112 | #
113 | # 
114 | #
115 | #
116 | # and a model and directives
117 | #
118 | # model = {
119 | # content: ""
120 | # url: "http://trusted.com/funny.gif"
121 | # };
122 | #
123 | # directives = {
124 | # escaped: { text: { function() { return this.content } } },
125 | # unescaped: { html: { function() { return this.content } } },
126 | # trusted: { url: { function() { return this.url } } }
127 | # }
128 | #
129 | # $('#template').render(model, directives);
130 | #
131 | # should give the result
132 | #
133 | #
134 | # 
137 | #
138 | #
139 | # Directives are executed after the default rendering, so that they can be used for overriding default rendering.
140 | renderDirectives: chainable (model, index, directives) ->
141 | for own key, attributes of directives when typeof attributes == 'object'
142 | model = {value: model} unless typeof model == 'object'
143 |
144 | for element in @matchingElements key
145 | element.renderDirectives model, index, attributes
146 |
147 | renderChildren: chainable (model, children, directives, options) ->
148 | for key in children
149 | for element in @matchingElements key
150 | @Transparency.render element.el, model[key], directives[key], options
151 |
152 | matchingElements: (key) ->
153 | elements = @queryCache[key] ||= (el for el in @elements when @Transparency.matcher el, key)
154 | helpers.log "Matching elements for '#{key}':", elements
155 | elements
156 |
157 |
--------------------------------------------------------------------------------
/src/transparency.coffee:
--------------------------------------------------------------------------------
1 | _ = require '../lib/lodash.js'
2 | helpers = require './helpers'
3 | Context = require './context'
4 |
5 | # **Transparency** is a client-side template engine which binds JSON objects to DOM elements.
6 | #
7 | # // Template:
8 | # //
9 | # // <script>alert('Injected')</script>
135 | #
136 | #
137 | # -
10 | # //
11 | # //
-
25 | # //
- Eat 26 | # //
- Do some programming 27 | # //
- Sleep 28 | # //