Skip to content

T
todomvc
Commit 488ddc31 authored by Fred Wu's avatar Fred Wu
Browse files
Options

Replaced the old Spine implementation

parent 56a09f6f
Hide whitespace changes
Inline Side-by-side
Showing with 741 additions and 11023 deletions
todo-example/spine-new/css/application.css deleted 100644 → 0
View file @ 56a09f6f
html, body {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
font-size: 14px;
line-height: 1.4em;
background: #eeeeee;
color: #333333;
}
#views {
width: 520px;
margin: 0 auto 40px auto;
background: white;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-moz-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
#tasks {
padding: 20px;
}
#tasks h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
padding: 0 0 10px 0;
}
#tasks input[type="text"] {
width: 466px;
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
border: 0;
outline: none;
padding: 6px;
border: 1px solid #999999;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
}
#tasks input::-webkit-input-placeholder {
font-style: italic;
}
#tasks .items {
margin: 10px 0;
list-style: none;
}
#tasks .item {
padding: 15px 20px 15px 0;
position: relative;
font-size: 24px;
border-bottom: 1px solid #cccccc;
}
#tasks .item.done span {
color: #777777;
text-decoration: line-through;
}
#tasks .item .destroy {
position: absolute;
right: 10px;
top: 16px;
display: none;
cursor: pointer;
width: 20px;
height: 20px;
background: url(../images/destroy.png) no-repeat center center;
}
#tasks .item:hover .destroy {
display: block;
}
#tasks .item .edit { display: none; }
#tasks .item.editing .edit { display: block; }
#tasks .item.editing .view { display: none; }
#tasks footer {
display: block;
margin: 20px -20px -20px -20px;
overflow: hidden;
color: #555555;
background: #f4fce8;
border-top: 1px solid #ededed;
padding: 0 20px;
line-height: 36px;
-moz-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
#tasks .clear {
display: block;
float: right;
line-height: 20px;
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
color: #555555;
font-size: 11px;
margin-top: 8px;
margin-bottom:8px;
padding: 0 10px 1px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
cursor: pointer;
}
#tasks .clear:hover {
background: rgba(0, 0, 0, 0.15);
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
}
#tasks .clear:active {
position: relative;
top: 1px;
}
#tasks .count span {
font-weight: bold;
}
#credits {
width: 520px;
margin: 30px auto;
color: #999;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#credits a {
color: #888;
}
\ No newline at end of file
todo-example/spine-new/index.html deleted 100644 → 0
View file @ 56a09f6f
<!DOCTYPE html>
<html>
<head>
<title>Spine.js</title>
<link rel="stylesheet" href="css/application.css" type="text/css" charset="utf-8">
<script src="lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jquery.tmpl.min.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/spine.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/local.js" type="text/javascript" charset="utf-8"></script>
<script src="js/controllers/tasks.js" type="text/javascript" charset="utf-8"></script>
<script src="js/models/task.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="views">
<div id="tasks">
<h1>Todos</h1>
<form id="new-task">
<input name="name" type="text" placeholder="What needs to be done?">
</form>
<div class="items">
<script type="text/html" id="task-template">
<div class="item {{if done}}done{{/if}}">
<div class="view" title="Double click to edit...">
<input type="checkbox" {{if done}}checked="checked"{{/if}}>
<span>${name}</span> <a class="destroy"></a>
</div>
<form class="edit">
<input type="text" name="name" value="${name}">
</form>
</div>
</script>
</div>
<footer>
<a class="clear">Clear completed</a>
<div class="count"><span class="countVal"></span> left</div>
</footer>
</div>
</div>
<div id="credits">
Based on the official <a href="https://github.com/maccman/spine.todos">Spine.Todos</a>.
</div>
</body>
</html>
\ No newline at end of file
todo-example/spine-new/lib/spine.js deleted 100755 → 0
View file @ 56a09f6f
(function() {
var $, Controller, Events, Log, Model, Module, Spine, guid, isArray, isBlank, makeArray, moduleKeywords;
var __slice = Array.prototype.slice, __indexOf = Array.prototype.indexOf || function(item) {
for (var i = 0, l = this.length; i < l; i++) {
if (this[i] === item) return i;
}
return -1;
}, __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, __hasProp = Object.prototype.hasOwnProperty, __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;
};
Events = {
bind: function(ev, callback) {
var calls, evs, name, _i, _len;
evs = ev.split(' ');
calls = this.hasOwnProperty('_callbacks') && this._callbacks || (this._callbacks = {});
for (_i = 0, _len = evs.length; _i < _len; _i++) {
name = evs[_i];
calls[name] || (calls[name] = []);
calls[name].push(callback);
}
return this;
},
one: function(ev, callback) {
return this.bind(ev, function() {
this.unbind(ev, arguments.callee);
return callback.apply(this, arguments);
});
},
trigger: function() {
var args, callback, ev, list, _i, _len, _ref;
args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
ev = args.shift();
list = this.hasOwnProperty('_callbacks') && ((_ref = this._callbacks) != null ? _ref[ev] : void 0);
if (!list) {
return false;
}
for (_i = 0, _len = list.length; _i < _len; _i++) {
callback = list[_i];
if (callback.apply(this, args) === false) {
break;
}
}
return true;
},
unbind: function(ev, callback) {
var cb, i, list, _len, _ref;
if (!ev) {
this._callbacks = {};
return this;
}
list = (_ref = this._callbacks) != null ? _ref[ev] : void 0;
if (!list) {
return this;
}
if (!callback) {
delete this._callbacks[ev];
return this;
}
for (i = 0, _len = list.length; i < _len; i++) {
cb = list[i];
if (cb === callback) {
list = list.slice();
list.splice(i, 1);
this._callbacks[ev] = list;
break;
}
}
return this;
}
};
Log = {
trace: true,
logPrefix: '(App)',
log: function() {
var args;
args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
if (!this.trace) {
return;
}
if (typeof console === 'undefined') {
return;
}
if (this.logPrefix) {
args.unshift(this.logPrefix);
}
console.log.apply(console, args);
return this;
}
};
moduleKeywords = ['included', 'extended'];
Module = (function() {
Module.include = function(obj) {
var included, key, value;
if (!obj) {
throw 'include(obj) requires obj';
}
for (key in obj) {
value = obj[key];
if (__indexOf.call(moduleKeywords, key) < 0) {
this.prototype[key] = value;
}
}
included = obj.included;
if (included) {
included.apply(this);
}
return this;
};
Module.extend = function(obj) {
var extended, key, value;
if (!obj) {
throw 'extend(obj) requires obj';
}
for (key in obj) {
value = obj[key];
if (__indexOf.call(moduleKeywords, key) < 0) {
this[key] = value;
}
}
extended = obj.extended;
if (extended) {
extended.apply(this);
}
return this;
};
Module.proxy = function(func) {
return __bind(function() {
return func.apply(this, arguments);
}, this);
};
Module.prototype.proxy = function(func) {
return __bind(function() {
return func.apply(this, arguments);
}, this);
};
function Module() {
if (typeof this.init === "function") {
this.init.apply(this, arguments);
}
}
return Module;
})();
Model = (function() {
__extends(Model, Module);
Model.extend(Events);
Model.records = {};
Model.attributes = [];
Model.configure = function() {
var attributes, name;
name = arguments[0], attributes = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
this.className = name;
this.records = {};
if (attributes.length) {
this.attributes = attributes;
}
this.attributes && (this.attributes = makeArray(this.attributes));
this.attributes || (this.attributes = []);
this.unbind();
return this;
};
Model.toString = function() {
return "" + this.className + "(" + (this.attributes.join(", ")) + ")";
};
Model.find = function(id) {
var record;
record = this.records[id];
if (!record) {
throw 'Unknown record';
}
return record.clone();
};
Model.exists = function(id) {
try {
return this.find(id);
} catch (e) {
return false;
}
};
Model.refresh = function(values, options) {
var record, records, _i, _len;
if (options == null) {
options = {};
}
if (options.clear) {
this.records = {};
}
records = this.fromJSON(values);
if (!isArray(records)) {
records = [records];
}
for (_i = 0, _len = records.length; _i < _len; _i++) {
record = records[_i];
record.newRecord = false;
record.id || (record.id = guid());
this.records[record.id] = record;
}
this.trigger('refresh', !options.clear && records);
return this;
};
Model.select = function(callback) {
var id, record, result;
result = (function() {
var _ref, _results;
_ref = this.records;
_results = [];
for (id in _ref) {
record = _ref[id];
if (callback(record)) {
_results.push(record);
}
}
return _results;
}).call(this);
return this.cloneArray(result);
};
Model.findByAttribute = function(name, value) {
var id, record, _ref;
_ref = this.records;
for (id in _ref) {
record = _ref[id];
if (record[name] === value) {
return record.clone();
}
}
return null;
};
Model.findAllByAttribute = function(name, value) {
return this.select(function(item) {
return item[name] === value;
});
};
Model.each = function(callback) {
var key, value, _ref, _results;
_ref = this.records;
_results = [];
for (key in _ref) {
value = _ref[key];
_results.push(callback(value.clone()));
}
return _results;
};
Model.all = function() {
return this.cloneArray(this.recordsValues());
};
Model.first = function() {
var record;
record = this.recordsValues()[0];
return record != null ? record.clone() : void 0;
};
Model.last = function() {
var record, values;
values = this.recordsValues();
record = values[values.length - 1];
return record != null ? record.clone() : void 0;
};
Model.count = function() {
return this.recordsValues().length;
};
Model.deleteAll = function() {
var key, value, _ref, _results;
_ref = this.records;
_results = [];
for (key in _ref) {
value = _ref[key];
_results.push(delete this.records[key]);
}
return _results;
};
Model.destroyAll = function() {
var key, value, _ref, _results;
_ref = this.records;
_results = [];
for (key in _ref) {
value = _ref[key];
_results.push(this.records[key].destroy());
}
return _results;
};
Model.update = function(id, atts) {
return this.find(id).updateAttributes(atts);
};
Model.create = function(atts) {
var record;
record = new this(atts);
return record.save();
};
Model.destroy = function(id) {
return this.find(id).destroy();
};
Model.change = function(callbackOrParams) {
if (typeof callbackOrParams === 'function') {
return this.bind('change', callbackOrParams);
} else {
return this.trigger('change', callbackOrParams);
}
};
Model.fetch = function(callbackOrParams) {
if (typeof callbackOrParams === 'function') {
return this.bind('fetch', callbackOrParams);
} else {
return this.trigger('fetch', callbackOrParams);
}
};
Model.toJSON = function() {
return this.recordsValues();
};
Model.fromJSON = function(objects) {
var value, _i, _len, _results;
if (!objects) {
return;
}
if (typeof objects === 'string') {
objects = JSON.parse(objects);
}
if (isArray(objects)) {
_results = [];
for (_i = 0, _len = objects.length; _i < _len; _i++) {
value = objects[_i];
_results.push(new this(value));
}
return _results;
} else {
return new this(objects);
}
};
Model.fromForm = function() {
var _ref;
return (_ref = new this).fromForm.apply(_ref, arguments);
};
Model.recordsValues = function() {
var key, result, value, _ref;
result = [];
_ref = this.records;
for (key in _ref) {
value = _ref[key];
result.push(value);
}
return result;
};
Model.cloneArray = function(array) {
var value, _i, _len, _results;
_results = [];
for (_i = 0, _len = array.length; _i < _len; _i++) {
value = array[_i];
_results.push(value.clone());
}
return _results;
};
Model.prototype.newRecord = true;
function Model(atts) {
Model.__super__.constructor.apply(this, arguments);
this.ids = [];
if (atts) {
this.load(atts);
}
}
Model.prototype.isNew = function() {
return this.newRecord;
};
Model.prototype.isValid = function() {
return !this.validate();
};
Model.prototype.validate = function() {};
Model.prototype.load = function(atts) {
var key, value;
for (key in atts) {
value = atts[key];
if (typeof this[key] === 'function') {
this[key](value);
} else {
this[key] = value;
}
}
return this;
};
Model.prototype.attributes = function() {
var key, result, _i, _len, _ref;
result = {};
_ref = this.constructor.attributes;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
key = _ref[_i];
if (key in this) {
if (typeof this[key] === 'function') {
result[key] = this[key]();
} else {
result[key] = this[key];
}
}
}
if (this.id) {
result.id = this.id;
}
return result;
};
Model.prototype.eql = function(rec) {
var _ref, _ref2;
return rec && rec.constructor === this.constructor && (rec.id === this.id || (_ref = this.id, __indexOf.call(rec.ids, _ref) >= 0) || (_ref2 = rec.id, __indexOf.call(this.ids, _ref2) >= 0));
};
Model.prototype.save = function() {
var error, record;
error = this.validate();
if (error) {
this.trigger('error', error);
return false;
}
this.trigger('beforeSave');
record = this.newRecord ? this.create() : this.update();
this.trigger('save');
return record;
};
Model.prototype.updateAttribute = function(name, value) {
this[name] = value;
return this.save();
};
Model.prototype.updateAttributes = function(atts) {
this.load(atts);
return this.save();
};
Model.prototype.changeID = function(id) {
var records;
this.ids.push(this.id);
records = this.constructor.records;
records[id] = records[this.id];
delete records[this.id];
this.id = id;
return this.save();
};
Model.prototype.destroy = function() {
this.trigger('beforeDestroy');
delete this.constructor.records[this.id];
this.destroyed = true;
this.trigger('destroy');
this.trigger('change', 'destroy');
this.unbind();
return this;
};
Model.prototype.dup = function(newRecord) {
var result;
result = new this.constructor(this.attributes());
if (newRecord === false) {
result.newRecord = this.newRecord;
} else {
delete result.id;
}
return result;
};
Model.prototype.clone = function() {
return Object.create(this);
};
Model.prototype.reload = function() {
var original;
if (this.newRecord) {
return this;
}
original = this.constructor.find(this.id);
this.load(original.attributes());
return original;
};
Model.prototype.toJSON = function() {
return this.attributes();
};
Model.prototype.toString = function() {
return "<" + this.constructor.className + " (" + (JSON.stringify(this)) + ")>";
};
Model.prototype.fromForm = function(form) {
var key, result, _i, _len, _ref;
result = {};
_ref = $(form).serializeArray();
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
key = _ref[_i];
result[key.name] = key.value;
}
return this.load(result);
};
Model.prototype.exists = function() {
return this.id && this.id in this.constructor.records;
};
Model.prototype.update = function() {
var clone, records;
this.trigger('beforeUpdate');
records = this.constructor.records;
records[this.id].load(this.attributes());
clone = records[this.id].clone();
clone.trigger('update');
clone.trigger('change', 'update');
return clone;
};
Model.prototype.create = function() {
var clone, records;
this.trigger('beforeCreate');
if (!this.id) {
this.id = guid();
}
this.newRecord = false;
records = this.constructor.records;
records[this.id] = this.dup(false);
clone = records[this.id].clone();
clone.trigger('create');
clone.trigger('change', 'create');
return clone;
};
Model.prototype.bind = function(events, callback) {
var binder, unbinder;
this.constructor.bind(events, binder = __bind(function(record) {
if (record && this.eql(record)) {
return callback.apply(this, arguments);
}
}, this));
this.constructor.bind('unbind', unbinder = __bind(function(record) {
if (record && this.eql(record)) {
this.constructor.unbind(events, binder);
return this.constructor.unbind('unbind', unbinder);
}
}, this));
return binder;
};
Model.prototype.trigger = function() {
var args, _ref;
args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
args.splice(1, 0, this);
return (_ref = this.constructor).trigger.apply(_ref, args);
};
Model.prototype.unbind = function() {
return this.trigger('unbind');
};
return Model;
})();
Controller = (function() {
__extends(Controller, Module);
Controller.include(Events);
Controller.include(Log);
Controller.prototype.eventSplitter = /^(\S+)\s*(.*)$/;
Controller.prototype.tag = 'div';
function Controller(options) {
this.release = __bind(this.release, this);
var key, value, _ref;
this.options = options;
_ref = this.options;
for (key in _ref) {
value = _ref[key];
this[key] = value;
}
if (!this.el) {
this.el = document.createElement(this.tag);
}
this.el = $(this.el);
if (this.className) {
this.el.addClass(this.className);
}
this.release(function() {
return this.el.remove();
});
if (!this.events) {
this.events = this.constructor.events;
}
if (!this.elements) {
this.elements = this.constructor.elements;
}
if (this.events) {
this.delegateEvents();
}
if (this.elements) {
this.refreshElements();
}
Controller.__super__.constructor.apply(this, arguments);
}
Controller.prototype.release = function(callback) {
if (typeof callback === 'function') {
return this.bind('release', callback);
} else {
return this.trigger('release');
}
};
Controller.prototype.$ = function(selector) {
return $(selector, this.el);
};
Controller.prototype.delegateEvents = function() {
var eventName, key, match, method, selector, _ref, _results;
_ref = this.events;
_results = [];
for (key in _ref) {
method = _ref[key];
if (typeof method !== 'function') {
method = this.proxy(this[method]);
}
match = key.match(this.eventSplitter);
eventName = match[1];
selector = match[2];
_results.push(selector === '' ? this.el.bind(eventName, method) : this.el.delegate(selector, eventName, method));
}
return _results;
};
Controller.prototype.refreshElements = function() {
var key, value, _ref, _results;
_ref = this.elements;
_results = [];
for (key in _ref) {
value = _ref[key];
_results.push(this[value] = this.$(key));
}
return _results;
};
Controller.prototype.delay = function(func, timeout) {
return setTimeout(this.proxy(func), timeout || 0);
};
Controller.prototype.html = function(element) {
this.el.html(element.el || element);
this.refreshElements();
return this.el;
};
Controller.prototype.append = function() {
var e, elements, _ref;
elements = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
elements = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = elements.length; _i < _len; _i++) {
e = elements[_i];
_results.push(e.el || e);
}
return _results;
})();
(_ref = this.el).append.apply(_ref, elements);
this.refreshElements();
return this.el;
};
Controller.prototype.appendTo = function(element) {
this.el.appendTo(element.el || element);
this.refreshElements();
return this.el;
};
Controller.prototype.prepend = function() {
var e, elements, _ref;
elements = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
elements = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = elements.length; _i < _len; _i++) {
e = elements[_i];
_results.push(e.el || e);
}
return _results;
})();
(_ref = this.el).prepend.apply(_ref, elements);
this.refreshElements();
return this.el;
};
Controller.prototype.replace = function(element) {
var previous, _ref;
_ref = [this.el, element.el || element], previous = _ref[0], this.el = _ref[1];
previous.replaceWith(this.el);
this.delegateEvents();
this.refreshElements();
return this.el;
};
return Controller;
})();
$ = this.jQuery || this.Zepto || function(element) {
return element;
};
if (typeof Object.create !== 'function') {
Object.create = function(o) {
var Func;
Func = function() {};
Func.prototype = o;
return new Func();
};
}
isArray = function(value) {
return Object.prototype.toString.call(value) === '[object Array]';
};
isBlank = function(value) {
var key;
if (!value) {
return true;
}
for (key in value) {
return false;
}
return true;
};
makeArray = function(args) {
return Array.prototype.slice.call(args, 0);
};
guid = function() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r, v;
r = Math.random() * 16 | 0;
v = c === 'x' ? r : r & 3 | 8;
return v.toString(16);
}).toUpperCase();
};
Spine = this.Spine = {};
if (typeof module !== "undefined" && module !== null) {
module.exports = Spine;
}
Spine.version = '1.0.3';
Spine.isArray = isArray;
Spine.isBlank = isBlank;
Spine.$ = $;
Spine.Events = Events;
Spine.Log = Log;
Spine.Module = Module;
Spine.Controller = Controller;
Spine.Model = Model;
Module.extend.call(Spine, Events);
Module.create = Module.sub = Controller.create = Controller.sub = Model.sub = function(instances, statics) {
var result;
result = (function() {
__extends(result, this);
function result() {
result.__super__.constructor.apply(this, arguments);
}
return result;
}).call(this);
if (instances) {
result.include(instances);
}
if (statics) {
result.extend(statics);
}
if (typeof result.unbind === "function") {
result.unbind();
}
return result;
};
Model.setup = function(name, attributes) {
var Instance;
if (attributes == null) {
attributes = [];
}
Instance = (function() {
__extends(Instance, this);
function Instance() {
Instance.__super__.constructor.apply(this, arguments);
}
return Instance;
}).call(this);
Instance.configure.apply(Instance, [name].concat(__slice.call(attributes)));
return Instance;
};
Module.init = Controller.init = Model.init = function(a1, a2, a3, a4, a5) {
return new this(a1, a2, a3, a4, a5);
};
Spine.Class = Module;
}).call(this);
todo-example/spine/app/application.js deleted 100644 → 0
View file @ 56a09f6f
jQuery(function($){
window.Tasks = Spine.Controller.create({
tag: "li",
proxied: ["render", "remove"],
events: {
"change input[type=checkbox]": "toggle",
"click .destroy": "destroy",
"dblclick .view": "edit",
"keypress input[type=text]": "blurOnEnter",
"blur input[type=text]": "close"
},
elements: {
"input[type=text]": "input",
".item": "wrapper"
},
init: function(){
this.item.bind("update", this.render);
this.item.bind("destroy", this.remove);
},
render: function(){
var elements = $("#taskTemplate").tmpl(this.item);
this.el.html(elements);
this.refreshElements();
return this;
},
toggle: function(){
this.item.done = !this.item.done;
this.item.save();
},
destroy: function(){
this.item.destroy();
},
edit: function(){
this.wrapper.addClass("editing");
this.input.focus();
},
blurOnEnter: function(e) {
if (e.keyCode == 13) e.target.blur();
},
close: function(){
this.wrapper.removeClass("editing");
this.item.updateAttributes({name: this.input.val()});
},
remove: function(){
this.el.remove();
}
});
window.TaskApp = Spine.Controller.create({
el: $("#tasks"),
proxied: ["addOne", "addAll", "renderCount"],
events: {
"submit form": "create",
"click .clear": "clear"
},
elements: {
".items": "items",
".countVal": "count",
".clear": "clear",
"form input": "input"
},
init: function(){
Task.bind("create", this.addOne);
Task.bind("refresh", this.addAll);
Task.bind("refresh change", this.renderCount);
Task.fetch();
},
addOne: function(task) {
var view = Tasks.init({item: task});
this.items.append(view.render().el);
},
addAll: function() {
Task.each(this.addOne);
},
create: function(){
Task.create({name: this.input.val()});
this.input.val("");
return false;
},
clear: function(){
Task.destroyDone();
},
renderCount: function(){
var active = Task.active().length;
this.count.text(active + ' left');
var inactive = Task.done().length;
this.clear[inactive ? "show" : "hide"]();
}
});
window.App = TaskApp.init();
});
\ No newline at end of file
todo-example/spine/app/models/task.js deleted 100644 → 0
View file @ 56a09f6f
// Create the Task model.
var Task = Spine.Model.setup("Task", ["name", "done"]);
// Persist model between page reloads.
Task.extend(Spine.Model.Local);
Task.extend({
// Return all active tasks.
active: function(){
return(this.select(function(item){ return !item.done; }));
},
// Return all done tasks.
done: function(){
return(this.select(function(item){ return !!item.done; }));
},
// Clear all done tasks.
destroyDone: function(){
jQuery(this.done()).each(function(i, rec){ rec.destroy(); });
}
});
\ No newline at end of file
todo-example/spine/css/application.css
View file @ 488ddc31
...@@ -15,12 +15,12 @@ body { ...@@ -15,12 +15,12 @@ body {
width: 520px; width: 520px;
margin: 0 auto 40px auto; margin: 0 auto 40px auto;
background: white; background: white;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; -o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-moz-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;
...@@ -47,7 +47,7 @@ body { ...@@ -47,7 +47,7 @@ body {
outline: none; outline: none;
padding: 6px; padding: 6px;
border: 1px solid #999999; border: 1px solid #999999;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
...@@ -98,13 +98,13 @@ body { ...@@ -98,13 +98,13 @@ body {
display: block; display: block;
margin: 20px -20px -20px -20px; margin: 20px -20px -20px -20px;
overflow: hidden; overflow: hidden;
color: #555555; color: #555555;
background: #f4fce8; background: #f4fce8;
border-top: 1px solid #ededed; border-top: 1px solid #ededed;
padding: 0 20px; padding: 0 20px;
line-height: 36px; line-height: 36px;
-moz-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;
...@@ -116,24 +116,24 @@ body { ...@@ -116,24 +116,24 @@ body {
float: right; float: right;
line-height: 20px; line-height: 20px;
text-decoration: none; text-decoration: none;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
color: #555555; color: #555555;
font-size: 11px; font-size: 11px;
margin-top: 8px; margin-top: 8px;
margin-bottom:8px; margin-bottom:8px;
padding: 0 10px 1px; padding: 0 10px 1px;
-moz-border-radius: 12px; -moz-border-radius: 12px;
-webkit-border-radius: 12px; -webkit-border-radius: 12px;
-o-border-radius: 12px; -o-border-radius: 12px;
border-radius: 12px; border-radius: 12px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; -o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
cursor: pointer; cursor: pointer;
} }
...@@ -152,4 +152,16 @@ body { ...@@ -152,4 +152,16 @@ body {
#tasks .count span { #tasks .count span {
font-weight: bold; font-weight: bold;
}
#credits {
width: 520px;
margin: 30px auto;
color: #999;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#credits a {
color: #888;
} }
\ No newline at end of file
todo-example/spine/index.html
View file @ 488ddc31
...@@ -4,45 +4,48 @@ ...@@ -4,45 +4,48 @@
<title>Spine.js</title> <title>Spine.js</title>
<link rel="stylesheet" href="css/application.css" type="text/css" charset="utf-8"> <link rel="stylesheet" href="css/application.css" type="text/css" charset="utf-8">
<script src="lib/json2.js" type="text/javascript" charset="utf-8"></script> <script src="lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="lib/jquery.tmpl.min.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/spine.js" type="text/javascript" charset="utf-8"></script> <script src="lib/spine.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/spine.model.local.js" type="text/javascript" charset="utf-8"></script> <script src="lib/local.js" type="text/javascript" charset="utf-8"></script>
<script src="app/models/task.js" type="text/javascript" charset="utf-8"></script> <script src="js/controllers/tasks.js" type="text/javascript" charset="utf-8"></script>
<script src="app/application.js" type="text/javascript" charset="utf-8"></script> <script src="js/models/task.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<script type="text/x-jquery-tmpl" id="taskTemplate">
<div class="item {{if done}}done{{/if}}">
<div class="view" title="Double click to edit...">
<input type="checkbox" {{if done}}checked="checked"{{/if}}>
<span>${name}</span> <a class="destroy"></a>
</div>
<div class="edit">
<input type="text" value="${name}">
</div>
</div>
</script>
</head> </head>
<body> <body>
<div id="views"> <div id="views">
<div id="tasks"> <div id="tasks">
<h1>Todos</h1> <h1>Todos</h1>
<form> <form id="new-task">
<input type="text" placeholder="What needs to be done?"> <input name="name" type="text" placeholder="What needs to be done?">
</form> </form>
<div class="items"></div> <div class="items">
<script type="text/html" id="task-template">
<div class="item {{if done}}done{{/if}}">
<div class="view" title="Double click to edit...">
<input type="checkbox" {{if done}}checked="checked"{{/if}}>
<span>${name}</span> <a class="destroy"></a>
</div>
<form class="edit">
<input type="text" name="name" value="${name}">
</form>
</div>
</script>
</div>
<footer> <footer>
<a class="clear">Clear completed</a> <a class="clear">Clear completed</a>
<div class="count"><span class="countVal"></span></div> <div class="count"><span class="countVal"></span> left</div>
</footer> </footer>
</div> </div>
</div> </div>
<div id="credits">
Based on the official <a href="https://github.com/maccman/spine.todos">Spine.Todos</a>.
</div>
</body> </body>
</html> </html>
\ No newline at end of file
todo-example/spine/lib/jquery.js deleted 100644 → 0
View file @ 56a09f6f
This source diff could not be displayed because it is too large. You can view the blob instead.
todo-example/spine/lib/jquery.tmpl.js deleted 100644 → 0
View file @ 56a09f6f
/*!
* jQuery Templates Plugin
* http://github.com/jquery/jquery-tmpl
*
* Copyright Software Freedom Conservancy, Inc.
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
(function( jQuery, undefined ){
var oldManip = jQuery.fn.domManip, tmplItmAtt = "_tmplitem", htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,
newTmplItems = {}, wrappedItems = {}, appendToTmplItems, topTmplItem = { key: 0, data: {} }, itemKey = 0, cloneIndex = 0, stack = [];
function newTmplItem( options, parentItem, fn, data ) {
// Returns a template item data structure for a new rendered instance of a template (a 'template item').
// The content field is a hierarchical array of strings and nested items (to be
// removed and replaced by nodes field of dom elements, once inserted in DOM).
var newItem = {
data: data || (parentItem ? parentItem.data : {}),
_wrap: parentItem ? parentItem._wrap : null,
tmpl: null,
parent: parentItem || null,
nodes: [],
calls: tiCalls,
nest: tiNest,
wrap: tiWrap,
html: tiHtml,
update: tiUpdate
};
if ( options ) {
jQuery.extend( newItem, options, { nodes: [], parent: parentItem } );
}
if ( fn ) {
// Build the hierarchical content to be used during insertion into DOM
newItem.tmpl = fn;
newItem._ctnt = newItem._ctnt || newItem.tmpl( jQuery, newItem );
newItem.key = ++itemKey;
// Keep track of new template item, until it is stored as jQuery Data on DOM element
(stack.length ? wrappedItems : newTmplItems)[itemKey] = newItem;
}
return newItem;
}
// Override appendTo etc., in order to provide support for targeting multiple elements. (This code would disappear if integrated in jquery core).
jQuery.each({
appendTo: "append",
prependTo: "prepend",
insertBefore: "before",
insertAfter: "after",
replaceAll: "replaceWith"
}, function( name, original ) {
jQuery.fn[ name ] = function( selector ) {
var ret = [], insert = jQuery( selector ), elems, i, l, tmplItems,
parent = this.length === 1 && this[0].parentNode;
appendToTmplItems = newTmplItems || {};
if ( parent && parent.nodeType === 11 && parent.childNodes.length === 1 && insert.length === 1 ) {
insert[ original ]( this[0] );
ret = this;
} else {
for ( i = 0, l = insert.length; i < l; i++ ) {
cloneIndex = i;
elems = (i > 0 ? this.clone(true) : this).get();
jQuery.fn[ original ].apply( jQuery(insert[i]), elems );
ret = ret.concat( elems );
}
cloneIndex = 0;
ret = this.pushStack( ret, name, insert.selector );
}
tmplItems = appendToTmplItems;
appendToTmplItems = null;
jQuery.tmpl.complete( tmplItems );
return ret;
};
});
jQuery.fn.extend({
// Use first wrapped element as template markup.
// Return wrapped set of template items, obtained by rendering template against data.
tmpl: function( data, options, parentItem ) {
return jQuery.tmpl( this[0], data, options, parentItem );
},
// Find which rendered template item the first wrapped DOM element belongs to
tmplItem: function() {
return jQuery.tmplItem( this[0] );
},
tmplElement: function() {
return jQuery.tmplElement( this[0] );
},
// Consider the first wrapped element as a template declaration, and get the compiled template or store it as a named template.
template: function( name ) {
return jQuery.template( name, this[0] );
},
domManip: function( args, table, callback, options ) {
// This appears to be a bug in the appendTo, etc. implementation
// it should be doing .call() instead of .apply(). See #6227
if ( args[0] && args[0].nodeType ) {
var dmArgs = jQuery.makeArray( arguments ), argsLength = args.length, i = 0, tmplItem;
while ( i < argsLength && !(tmplItem = jQuery.data( args[i++], "tmplItem" ))) {}
if ( argsLength > 1 ) {
dmArgs[0] = [jQuery.makeArray( args )];
}
if ( tmplItem && cloneIndex ) {
dmArgs[2] = function( fragClone ) {
// Handler called by oldManip when rendered template has been inserted into DOM.
jQuery.tmpl.afterManip( this, fragClone, callback );
};
}
oldManip.apply( this, dmArgs );
} else {
oldManip.apply( this, arguments );
}
cloneIndex = 0;
if ( !appendToTmplItems ) {
jQuery.tmpl.complete( newTmplItems );
}
return this;
}
});
jQuery.extend({
// Return wrapped set of template items, obtained by rendering template against data.
tmpl: function( tmpl, data, options, parentItem ) {
var ret, topLevel = !parentItem;
if ( topLevel ) {
// This is a top-level tmpl call (not from a nested template using {{tmpl}})
parentItem = topTmplItem;
if ( typeof tmpl != "function" )
tmpl = jQuery.template[tmpl] || jQuery.template( null, tmpl );
wrappedItems = {}; // Any wrapped items will be rebuilt, since this is top level
} else if ( !tmpl ) {
// The template item is already associated with DOM - this is a refresh.
// Re-evaluate rendered template for the parentItem
tmpl = parentItem.tmpl;
newTmplItems[parentItem.key] = parentItem;
parentItem.nodes = [];
if ( parentItem.wrapped ) {
updateWrapped( parentItem, parentItem.wrapped );
}
// Rebuild, without creating a new template item
return jQuery( build( parentItem, null, parentItem.tmpl( jQuery, parentItem ) ));
}
if ( !tmpl ) {
return []; // Could throw...
}
if ( typeof data === "function" ) {
data = data.call( parentItem || {} );
}
if ( options && options.wrapped ) {
updateWrapped( options, options.wrapped );
}
ret = jQuery.isArray( data ) ?
jQuery.map( data, function( dataItem ) {
return dataItem ? newTmplItem( options, parentItem, tmpl, dataItem ) : null;
}) :
[ newTmplItem( options, parentItem, tmpl, data ) ];
return topLevel ? jQuery( build( parentItem, null, ret ) ) : ret;
},
// Return rendered template item for an element.
tmplItem: function( elem ) {
var tmplItem;
if ( elem instanceof jQuery ) {
elem = elem[0];
}
while ( elem && elem.nodeType === 1 && !(tmplItem = jQuery.data( elem, "tmplItem" )) && (elem = elem.parentNode) ) {}
return tmplItem || topTmplItem;
},
tmplElement: function( elem ) {
var tmplItem;
if ( elem instanceof jQuery ) {
elem = elem[0];
}
while ( elem && elem.nodeType === 1 && !jQuery.data( elem, "tmplItem" ) && (elem = elem.parentNode) ) {}
return elem;
},
// Set:
// Use $.template( name, tmpl ) to cache a named template,
// where tmpl is a template string, a script element or a jQuery instance wrapping a script element, etc.
// Use $( "selector" ).template( name ) to provide access by name to a script block template declaration.
// Get:
// Use $.template( name ) to access a cached template.
// Also $( selectorToScriptBlock ).template(), or $.template( null, templateString )
// will return the compiled template, without adding a name reference.
// If templateString includes at least one HTML tag, $.template( templateString ) is equivalent
// to $.template( null, templateString )
template: function( name, tmpl ) {
if (tmpl) {
// Compile template and associate with name
if ( typeof tmpl === "string" ) {
// This is an HTML string being passed directly in.
tmpl = buildTmplFn( tmpl )
} else if ( tmpl instanceof jQuery ) {
tmpl = tmpl[0] || {};
}
if ( tmpl.nodeType ) {
// If this is a template block, use cached copy, or generate tmpl function and cache.
tmpl = jQuery.data( tmpl, "tmpl" ) || jQuery.data( tmpl, "tmpl", buildTmplFn( tmpl.innerHTML ));
}
return typeof name === "string" ? (jQuery.template[name] = tmpl) : tmpl;
}
// Return named compiled template
return name ? (typeof name !== "string" ? jQuery.template( null, name ):
(jQuery.template[name] ||
// If not in map, treat as a selector. (If integrated with core, use quickExpr.exec)
jQuery.template( null, htmlExpr.test( name ) ? name : jQuery( name )))) : null;
},
encode: function( text ) {
// Do HTML encoding replacing < > & and ' and " by corresponding entities.
return ("" + text).split("<").join("&lt;").split(">").join("&gt;").split('"').join("&#34;").split("'").join("&#39;");
}
});
jQuery.extend( jQuery.tmpl, {
tag: {
"tmpl": {
_default: { $2: "null" },
open: "if($notnull_1){_=_.concat($item.nest($1,$2));}"
// tmpl target parameter can be of type function, so use $1, not $1a (so not auto detection of functions)
// This means that {{tmpl foo}} treats foo as a template (which IS a function).
// Explicit parens can be used if foo is a function that returns a template: {{tmpl foo()}}.
},
"wrap": {
_default: { $2: "null" },
open: "$item.calls(_,$1,$2);_=[];",
close: "call=$item.calls();_=call._.concat($item.wrap(call,_));"
},
"each": {
_default: { $2: "$index, $value" },
open: "if($notnull_1){$.each($1a,function($2){with(this){",
close: "}});}"
},
"if": {
open: "if(($notnull_1) && $1a){",
close: "}"
},
"else": {
_default: { $1: "true" },
open: "}else if(($notnull_1) && $1a){"
},
"html": {
// Unecoded expression evaluation.
open: "if($notnull_1){_.push($1a);}"
},
"=": {
// Encoded expression evaluation. Abbreviated form is ${}.
_default: { $1: "$data" },
open: "if($notnull_1){_.push($.encode($1a));}"
},
"!": {
// Comment tag. Skipped by parser
open: ""
}
},
// This stub can be overridden, e.g. in jquery.tmplPlus for providing rendered events
complete: function( items ) {
newTmplItems = {};
},
// Call this from code which overrides domManip, or equivalent
// Manage cloning/storing template items etc.
afterManip: function afterManip( elem, fragClone, callback ) {
// Provides cloned fragment ready for fixup prior to and after insertion into DOM
var content = fragClone.nodeType === 11 ?
jQuery.makeArray(fragClone.childNodes) :
fragClone.nodeType === 1 ? [fragClone] : [];
// Return fragment to original caller (e.g. append) for DOM insertion
callback.call( elem, fragClone );
// Fragment has been inserted:- Add inserted nodes to tmplItem data structure. Replace inserted element annotations by jQuery.data.
storeTmplItems( content );
cloneIndex++;
}
});
//========================== Private helper functions, used by code above ==========================
function build( tmplItem, nested, content ) {
// Convert hierarchical content into flat string array
// and finally return array of fragments ready for DOM insertion
var frag, ret = content ? jQuery.map( content, function( item ) {
return (typeof item === "string") ?
// Insert template item annotations, to be converted to jQuery.data( "tmplItem" ) when elems are inserted into DOM.
(tmplItem.key ? item.replace( /(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + tmplItmAtt + "=\"" + tmplItem.key + "\" $2" ) : item) :
// This is a child template item. Build nested template.
build( item, tmplItem, item._ctnt );
}) :
// If content is not defined, insert tmplItem directly. Not a template item. May be a string, or a string array, e.g. from {{html $item.html()}}.
tmplItem;
if ( nested ) {
return ret;
}
// top-level template
ret = ret.join("");
// Support templates which have initial or final text nodes, or consist only of text
// Also support HTML entities within the HTML markup.
ret.replace( /^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/, function( all, before, middle, after) {
frag = jQuery( middle ).get();
storeTmplItems( frag );
if ( before ) {
frag = unencode( before ).concat(frag);
}
if ( after ) {
frag = frag.concat(unencode( after ));
}
});
return frag ? frag : unencode( ret );
}
function unencode( text ) {
// Use createElement, since createTextNode will not render HTML entities correctly
var el = document.createElement( "div" );
el.innerHTML = text;
return jQuery.makeArray(el.childNodes);
}
// Generate a reusable function that will serve to render a template against data
function buildTmplFn( markup ) {
return new Function("jQuery","$item",
"var $=jQuery,call,_=[],$data=$item.data;" +
// Introduce the data as local variables using with(){}
"with($data){_.push('" +
// Convert the template into pure JavaScript
jQuery.trim(markup)
.replace( /([\\'])/g, "\\$1" )
.replace( /[\r\t\n]/g, " " )
.replace( /\$\{([^\}]*)\}/g, "{{= $1}}" )
.replace( /\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,
function( all, slash, type, fnargs, target, parens, args ) {
var tag = jQuery.tmpl.tag[ type ], def, expr, exprAutoFnDetect;
if ( !tag ) {
throw "Template command not found: " + type;
}
def = tag._default || [];
if ( parens && !/\w$/.test(target)) {
target += parens;
parens = "";
}
if ( target ) {
target = unescape( target );
args = args ? ("," + unescape( args ) + ")") : (parens ? ")" : "");
// Support for target being things like a.toLowerCase();
// In that case don't call with template item as 'this' pointer. Just evaluate...
expr = parens ? (target.indexOf(".") > -1 ? target + parens : ("(" + target + ").call($data" + args)) : target;
exprAutoFnDetect = parens ? expr : "(typeof(" + target + ")==='function'?(" + target + ").call($item):(" + target + "))";
} else {
exprAutoFnDetect = expr = def.$1 || "null";
}
fnargs = unescape( fnargs );
return "');" +
tag[ slash ? "close" : "open" ]
.split( "$notnull_1" ).join( target ? "typeof(" + target + ")!=='undefined' && (" + target + ")!=null" : "true" )
.split( "$1a" ).join( exprAutoFnDetect )
.split( "$1" ).join( expr )
.split( "$2" ).join( fnargs ?
fnargs.replace( /\s*([^\(]+)\s*(\((.*?)\))?/g, function( all, name, parens, params ) {
params = params ? ("," + params + ")") : (parens ? ")" : "");
return params ? ("(" + name + ").call($item" + params) : all;
})
: (def.$2||"")
) +
"_.push('";
}) +
"');}return _;"
);
}
function updateWrapped( options, wrapped ) {
// Build the wrapped content.
options._wrap = build( options, true,
// Suport imperative scenario in which options.wrapped can be set to a selector or an HTML string.
jQuery.isArray( wrapped ) ? wrapped : [htmlExpr.test( wrapped ) ? wrapped : jQuery( wrapped ).html()]
).join("");
}
function unescape( args ) {
return args ? args.replace( /\\'/g, "'").replace(/\\\\/g, "\\" ) : null;
}
function outerHtml( elem ) {
var div = document.createElement("div");
div.appendChild( elem.cloneNode(true) );
return div.innerHTML;
}
// Store template items in jQuery.data(), ensuring a unique tmplItem data data structure for each rendered template instance.
function storeTmplItems( content ) {
var keySuffix = "_" + cloneIndex, elem, elems, newClonedItems = {}, i, l, m;
for ( i = 0, l = content.length; i < l; i++ ) {
if ( (elem = content[i]).nodeType !== 1 ) {
continue;
}
elems = elem.getElementsByTagName("*");
for ( m = elems.length - 1; m >= 0; m-- ) {
processItemKey( elems[m] );
}
processItemKey( elem );
}
function processItemKey( el ) {
var pntKey, pntNode = el, pntItem, tmplItem, key;
// Ensure that each rendered template inserted into the DOM has its own template item,
if ( (key = el.getAttribute( tmplItmAtt ))) {
while ( pntNode.parentNode && (pntNode = pntNode.parentNode).nodeType === 1 && !(pntKey = pntNode.getAttribute( tmplItmAtt ))) { }
if ( pntKey !== key ) {
// The next ancestor with a _tmplitem expando is on a different key than this one.
// So this is a top-level element within this template item
// Set pntNode to the key of the parentNode, or to 0 if pntNode.parentNode is null, or pntNode is a fragment.
pntNode = pntNode.parentNode ? (pntNode.nodeType === 11 ? 0 : (pntNode.getAttribute( tmplItmAtt ) || 0)) : 0;
if ( !(tmplItem = newTmplItems[key]) ) {
// The item is for wrapped content, and was copied from the temporary parent wrappedItem.
tmplItem = wrappedItems[key];
tmplItem = newTmplItem( tmplItem, newTmplItems[pntNode]||wrappedItems[pntNode], null, true );
tmplItem.key = ++itemKey;
newTmplItems[itemKey] = tmplItem;
}
if ( cloneIndex ) {
cloneTmplItem( key );
}
}
el.removeAttribute( tmplItmAtt );
} else if ( cloneIndex && (tmplItem = jQuery.data( el, "tmplItem" )) ) {
// This was a rendered element, cloned during append or appendTo etc.
// TmplItem stored in jQuery data has already been cloned in cloneCopyEvent. We must replace it with a fresh cloned tmplItem.
cloneTmplItem( tmplItem.key );
newTmplItems[tmplItem.key] = tmplItem;
pntNode = jQuery.data( el.parentNode, "tmplItem" );
pntNode = pntNode ? pntNode.key : 0;
}
if ( tmplItem ) {
pntItem = tmplItem;
// Find the template item of the parent element.
// (Using !=, not !==, since pntItem.key is number, and pntNode may be a string)
while ( pntItem && pntItem.key != pntNode ) {
// Add this element as a top-level node for this rendered template item, as well as for any
// ancestor items between this item and the item of its parent element
pntItem.nodes.push( el );
pntItem = pntItem.parent;
}
// Delete content built during rendering - reduce API surface area and memory use, and avoid exposing of stale data after rendering...
delete tmplItem._ctnt;
delete tmplItem._wrap;
// Store template item as jQuery data on the element
jQuery.data( el, "tmplItem", tmplItem );
}
function cloneTmplItem( key ) {
key = key + keySuffix;
tmplItem = newClonedItems[key] =
(newClonedItems[key] || newTmplItem( tmplItem, newTmplItems[tmplItem.parent.key + keySuffix] || tmplItem.parent, null, true ));
}
}
}
//---- Helper functions for template item ----
function tiCalls( content, tmpl, data, options ) {
if ( !content ) {
return stack.pop();
}
stack.push({ _: content, tmpl: tmpl, item:this, data: data, options: options });
}
function tiNest( tmpl, data, options ) {
// nested template, using {{tmpl}} tag
return jQuery.tmpl( jQuery.template( tmpl ), data, options, this );
}
function tiWrap( call, wrapped ) {
// nested template, using {{wrap}} tag
var options = call.options || {};
options.wrapped = wrapped;
// Apply the template, which may incorporate wrapped content,
return jQuery.tmpl( jQuery.template( call.tmpl ), call.data, options, call.item );
}
function tiHtml( filter, textOnly ) {
var wrapped = this._wrap;
return jQuery.map(
jQuery( jQuery.isArray( wrapped ) ? wrapped.join("") : wrapped ).filter( filter || "*" ),
function(e) {
return textOnly ?
e.innerText || e.textContent :
e.outerHTML || outerHtml(e);
});
}
function tiUpdate() {
var coll = this.nodes;
jQuery.tmpl( null, null, null, this).insertBefore( coll[0] );
jQuery( coll ).remove();
}
})( jQuery );
\ No newline at end of file
todo-example/spine/lib/json2.js deleted 100644 → 0
View file @ 56a09f6f
/*
http://www.JSON.org/json2.js
2009-09-29
Public Domain.
NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
See http://www.JSON.org/js.html
This code should be minified before deployment.
See http://javascript.crockford.com/jsmin.html
USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
NOT CONTROL.
This file creates a global JSON object containing two methods: stringify
and parse.
JSON.stringify(value, replacer, space)
value any JavaScript value, usually an object or array.
replacer an optional parameter that determines how object
values are stringified for objects. It can be a
function or an array of strings.
space an optional parameter that specifies the indentation
of nested structures. If it is omitted, the text will
be packed without extra whitespace. If it is a number,
it will specify the number of spaces to indent at each
level. If it is a string (such as '\t' or '&nbsp;'),
it contains the characters used to indent at each level.
This method produces a JSON text from a JavaScript value.
When an object value is found, if the object contains a toJSON
method, its toJSON method will be called and the result will be
stringified. A toJSON method does not serialize: it returns the
value represented by the name/value pair that should be serialized,
or undefined if nothing should be serialized. The toJSON method
will be passed the key associated with the value, and this will be
bound to the value
For example, this would serialize Dates as ISO strings.
Date.prototype.toJSON = function (key) {
function f(n) {
// Format integers to have at least two digits.
return n < 10 ? '0' + n : n;
}
return this.getUTCFullYear() + '-' +
f(this.getUTCMonth() + 1) + '-' +
f(this.getUTCDate()) + 'T' +
f(this.getUTCHours()) + ':' +
f(this.getUTCMinutes()) + ':' +
f(this.getUTCSeconds()) + 'Z';
};
You can provide an optional replacer method. It will be passed the
key and value of each member, with this bound to the containing
object. The value that is returned from your method will be
serialized. If your method returns undefined, then the member will
be excluded from the serialization.
If the replacer parameter is an array of strings, then it will be
used to select the members to be serialized. It filters the results
such that only members with keys listed in the replacer array are
stringified.
Values that do not have JSON representations, such as undefined or
functions, will not be serialized. Such values in objects will be
dropped; in arrays they will be replaced with null. You can use
a replacer function to replace those with JSON values.
JSON.stringify(undefined) returns undefined.
The optional space parameter produces a stringification of the
value that is filled with line breaks and indentation to make it
easier to read.
If the space parameter is a non-empty string, then that string will
be used for indentation. If the space parameter is a number, then
the indentation will be that many spaces.
Example:
text = JSON.stringify(['e', {pluribus: 'unum'}]);
// text is '["e",{"pluribus":"unum"}]'
text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t');
// text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
text = JSON.stringify([new Date()], function (key, value) {
return this[key] instanceof Date ?
'Date(' + this[key] + ')' : value;
});
// text is '["Date(---current time---)"]'
JSON.parse(text, reviver)
This method parses a JSON text to produce an object or array.
It can throw a SyntaxError exception.
The optional reviver parameter is a function that can filter and
transform the results. It receives each of the keys and values,
and its return value is used instead of the original value.
If it returns what it received, then the structure is not modified.
If it returns undefined then the member is deleted.
Example:
// Parse the text. Values that look like ISO date strings will
// be converted to Date objects.
myData = JSON.parse(text, function (key, value) {
var a;
if (typeof value === 'string') {
a =
/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
if (a) {
return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
+a[5], +a[6]));
}
}
return value;
});
myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
var d;
if (typeof value === 'string' &&
value.slice(0, 5) === 'Date(' &&
value.slice(-1) === ')') {
d = new Date(value.slice(5, -1));
if (d) {
return d;
}
}
return value;
});
This is a reference implementation. You are free to copy, modify, or
redistribute.
*/
/*jslint evil: true, strict: false */
/*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply,
call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
lastIndex, length, parse, prototype, push, replace, slice, stringify,
test, toJSON, toString, valueOf
*/
// Create a JSON object only if one does not already exist. We create the
// methods in a closure to avoid creating global variables.
if (!this.JSON) {
this.JSON = {};
}
(function () {
function f(n) {
// Format integers to have at least two digits.
return n < 10 ? '0' + n : n;
}
if (typeof Date.prototype.toJSON !== 'function') {
Date.prototype.toJSON = function (key) {
return isFinite(this.valueOf()) ?
this.getUTCFullYear() + '-' +
f(this.getUTCMonth() + 1) + '-' +
f(this.getUTCDate()) + 'T' +
f(this.getUTCHours()) + ':' +
f(this.getUTCMinutes()) + ':' +
f(this.getUTCSeconds()) + 'Z' : null;
};
String.prototype.toJSON =
Number.prototype.toJSON =
Boolean.prototype.toJSON = function (key) {
return this.valueOf();
};
}
var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
gap,
indent,
meta = { // table of character substitutions
'\b': '\\b',
'\t': '\\t',
'\n': '\\n',
'\f': '\\f',
'\r': '\\r',
'"' : '\\"',
'\\': '\\\\'
},
rep;
function quote(string) {
// If the string contains no control characters, no quote characters, and no
// backslash characters, then we can safely slap some quotes around it.
// Otherwise we must also replace the offending characters with safe escape
// sequences.
escapable.lastIndex = 0;
return escapable.test(string) ?
'"' + string.replace(escapable, function (a) {
var c = meta[a];
return typeof c === 'string' ? c :
'\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
}) + '"' :
'"' + string + '"';
}
function str(key, holder) {
// Produce a string from holder[key].
var i, // The loop counter.
k, // The member key.
v, // The member value.
length,
mind = gap,
partial,
value = holder[key];
// If the value has a toJSON method, call it to obtain a replacement value.
if (value && typeof value === 'object' &&
typeof value.toJSON === 'function') {
value = value.toJSON(key);
}
// If we were called with a replacer function, then call the replacer to
// obtain a replacement value.
if (typeof rep === 'function') {
value = rep.call(holder, key, value);
}
// What happens next depends on the value's type.
switch (typeof value) {
case 'string':
return quote(value);
case 'number':
// JSON numbers must be finite. Encode non-finite numbers as null.
return isFinite(value) ? String(value) : 'null';
case 'boolean':
case 'null':
// If the value is a boolean or null, convert it to a string. Note:
// typeof null does not produce 'null'. The case is included here in
// the remote chance that this gets fixed someday.
return String(value);
// If the type is 'object', we might be dealing with an object or an array or
// null.
case 'object':
// Due to a specification blunder in ECMAScript, typeof null is 'object',
// so watch out for that case.
if (!value) {
return 'null';
}
// Make an array to hold the partial results of stringifying this object value.
gap += indent;
partial = [];
// Is the value an array?
if (Object.prototype.toString.apply(value) === '[object Array]') {
// The value is an array. Stringify every element. Use null as a placeholder
// for non-JSON values.
length = value.length;
for (i = 0; i < length; i += 1) {
partial[i] = str(i, value) || 'null';
}
// Join all of the elements together, separated with commas, and wrap them in
// brackets.
v = partial.length === 0 ? '[]' :
gap ? '[\n' + gap +
partial.join(',\n' + gap) + '\n' +
mind + ']' :
'[' + partial.join(',') + ']';
gap = mind;
return v;
}
// If the replacer is an array, use it to select the members to be stringified.
if (rep && typeof rep === 'object') {
length = rep.length;
for (i = 0; i < length; i += 1) {
k = rep[i];
if (typeof k === 'string') {
v = str(k, value);
if (v) {
partial.push(quote(k) + (gap ? ': ' : ':') + v);
}
}
}
} else {
// Otherwise, iterate through all of the keys in the object.
for (k in value) {
if (Object.hasOwnProperty.call(value, k)) {
v = str(k, value);
if (v) {
partial.push(quote(k) + (gap ? ': ' : ':') + v);
}
}
}
}
// Join all of the member texts together, separated with commas,
// and wrap them in braces.
v = partial.length === 0 ? '{}' :
gap ? '{\n' + gap + partial.join(',\n' + gap) + '\n' +
mind + '}' : '{' + partial.join(',') + '}';
gap = mind;
return v;
}
}
// If the JSON object does not yet have a stringify method, give it one.
if (typeof JSON.stringify !== 'function') {
JSON.stringify = function (value, replacer, space) {
// The stringify method takes a value and an optional replacer, and an optional
// space parameter, and returns a JSON text. The replacer can be a function
// that can replace values, or an array of strings that will select the keys.
// A default replacer method can be provided. Use of the space parameter can
// produce text that is more easily readable.
var i;
gap = '';
indent = '';
// If the space parameter is a number, make an indent string containing that
// many spaces.
if (typeof space === 'number') {
for (i = 0; i < space; i += 1) {
indent += ' ';
}
// If the space parameter is a string, it will be used as the indent string.
} else if (typeof space === 'string') {
indent = space;
}
// If there is a replacer, it must be a function or an array.
// Otherwise, throw an error.
rep = replacer;
if (replacer && typeof replacer !== 'function' &&
(typeof replacer !== 'object' ||
typeof replacer.length !== 'number')) {
throw new Error('JSON.stringify');
}
// Make a fake root object containing our value under the key of ''.
// Return the result of stringifying the value.
return str('', {'': value});
};
}
// If the JSON object does not yet have a parse method, give it one.
if (typeof JSON.parse !== 'function') {
JSON.parse = function (text, reviver) {
// The parse method takes a text and an optional reviver function, and returns
// a JavaScript value if the text is a valid JSON text.
var j;
function walk(holder, key) {
// The walk method is used to recursively walk the resulting structure so
// that modifications can be made.
var k, v, value = holder[key];
if (value && typeof value === 'object') {
for (k in value) {
if (Object.hasOwnProperty.call(value, k)) {
v = walk(value, k);
if (v !== undefined) {
value[k] = v;
} else {
delete value[k];
}
}
}
}
return reviver.call(holder, key, value);
}
// Parsing happens in four stages. In the first stage, we replace certain
// Unicode characters with escape sequences. JavaScript handles many characters
// incorrectly, either silently deleting them, or treating them as line endings.
cx.lastIndex = 0;
if (cx.test(text)) {
text = text.replace(cx, function (a) {
return '\\u' +
('0000' + a.charCodeAt(0).toString(16)).slice(-4);
});
}
// In the second stage, we run the text against regular expressions that look
// for non-JSON patterns. We are especially concerned with '()' and 'new'
// because they can cause invocation, and '=' because it can cause mutation.
// But just to be safe, we want to reject all unexpected forms.
// We split the second stage into 4 regexp operations in order to work around
// crippling inefficiencies in IE's and Safari's regexp engines. First we
// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
// replace all simple value tokens with ']' characters. Third, we delete all
// open brackets that follow a colon or comma or that begin the text. Finally,
// we look to see that the remaining characters are only whitespace or ']' or
// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
if (/^[\],:{}\s]*$/.
test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@').
replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
// In the third stage we use the eval function to compile the text into a
// JavaScript structure. The '{' operator is subject to a syntactic ambiguity
// in JavaScript: it can begin a block or an object literal. We wrap the text
// in parens to eliminate the ambiguity.
j = eval('(' + text + ')');
// In the optional fourth stage, we recursively walk the new structure, passing
// each name/value pair to a reviver function for possible transformation.
return typeof reviver === 'function' ?
walk({'': j}, '') : j;
}
// If the text is not JSON parseable, then a SyntaxError is thrown.
throw new SyntaxError('JSON.parse');
};
}
}());
\ No newline at end of file
todo-example/spine/lib/spine.js 100644 → 100755
View file @ 488ddc31
(function(){ (function() {
var $, Controller, Events, Log, Model, Module, Spine, guid, isArray, isBlank, makeArray, moduleKeywords;
var Spine; var __slice = Array.prototype.slice, __indexOf = Array.prototype.indexOf || function(item) {
if (typeof exports !== "undefined") { for (var i = 0, l = this.length; i < l; i++) {
Spine = exports; if (this[i] === item) return i;
} else { }
Spine = this.Spine = {}; return -1;
} }, __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
Spine.version = "0.0.3"; function ctor() { this.constructor = child; }
ctor.prototype = parent.prototype;
var $ = Spine.$ = this.jQuery || this.Zepto; child.prototype = new ctor;
child.__super__ = parent.prototype;
var makeArray = Spine.makeArray = function(args){ return child;
return Array.prototype.slice.call(args, 0);
}; };
Events = {
// Shim Array, as these functions aren't in IE
if (typeof Array.prototype.indexOf === "undefined")
Array.prototype.indexOf = function(value){
for ( var i = 0; i < this.length; i++ )
if ( this[ i ] === value )
return i;
return -1;
};
var Events = Spine.Events = {
bind: function(ev, callback) { bind: function(ev, callback) {
var evs = ev.split(" "); var calls, evs, name, _i, _len;
var calls = this._callbacks || (this._callbacks = {}); evs = ev.split(' ');
calls = this.hasOwnProperty('_callbacks') && this._callbacks || (this._callbacks = {});
for (var i=0; i < evs.length; i++) for (_i = 0, _len = evs.length; _i < _len; _i++) {
(this._callbacks[evs[i]] || (this._callbacks[evs[i]] = [])).push(callback); name = evs[_i];
calls[name] || (calls[name] = []);
calls[name].push(callback);
}
return this; return this;
}, },
one: function(ev, callback) {
return this.bind(ev, function() {
this.unbind(ev, arguments.callee);
return callback.apply(this, arguments);
});
},
trigger: function() { trigger: function() {
var args = makeArray(arguments); var args, callback, ev, list, _i, _len, _ref;
var ev = args.shift(); args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
ev = args.shift();
var list, calls, i, l; list = this.hasOwnProperty('_callbacks') && ((_ref = this._callbacks) != null ? _ref[ev] : void 0);
if (!(calls = this._callbacks)) return false; if (!list) {
if (!(list = this._callbacks[ev])) return false; return false;
}
for (i = 0, l = list.length; i < l; i++) for (_i = 0, _len = list.length; _i < _len; _i++) {
if (list[i].apply(this, args) === false) callback = list[_i];
if (callback.apply(this, args) === false) {
break; break;
}
}
return true; return true;
}, },
unbind: function(ev, callback) {
unbind: function(ev, callback){ var cb, i, list, _len, _ref;
if ( !ev ) { if (!ev) {
this._callbacks = {}; this._callbacks = {};
return this; return this;
} }
list = (_ref = this._callbacks) != null ? _ref[ev] : void 0;
var list, calls, i, l; if (!list) {
if (!(calls = this._callbacks)) return this; return this;
if (!(list = this._callbacks[ev])) return this; }
if (!callback) {
if ( !callback ) {
delete this._callbacks[ev]; delete this._callbacks[ev];
return this; return this;
} }
for (i = 0, _len = list.length; i < _len; i++) {
for (i = 0, l = list.length; i < l; i++) cb = list[i];
if (callback === list[i]) { if (cb === callback) {
list = list.slice();
list.splice(i, 1); list.splice(i, 1);
this._callbacks[ev] = list;
break; break;
} }
}
return this; return this;
} }
}; };
Log = {
var Log = Spine.Log = {
trace: true, trace: true,
logPrefix: '(App)',
logPrefix: "(App)", log: function() {
var args;
log: function(){ args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
if ( !this.trace ) return; if (!this.trace) {
if (typeof console == "undefined") return; return;
var args = makeArray(arguments); }
if (this.logPrefix) args.unshift(this.logPrefix); if (typeof console === 'undefined') {
return;
}
if (this.logPrefix) {
args.unshift(this.logPrefix);
}
console.log.apply(console, args); console.log.apply(console, args);
return this; return this;
} }
}; };
moduleKeywords = ['included', 'extended'];
// Classes (or prototypial inheritors) Module = (function() {
Module.include = function(obj) {
if (typeof Object.create !== "function") var included, key, value;
Object.create = function(o) { if (!obj) {
function F() {} throw 'include(obj) requires obj';
F.prototype = o; }
return new F(); for (key in obj) {
}; value = obj[key];
if (__indexOf.call(moduleKeywords, key) < 0) {
var moduleKeywords = ["included", "extended"]; this.prototype[key] = value;
}
var Class = Spine.Class = { }
inherited: function(){}, included = obj.included;
created: function(){}, if (included) {
included.apply(this);
prototype: { }
initializer: function(){},
init: function(){}
},
create: function(include, extend){
var object = Object.create(this);
object.parent = this;
object.prototype = object.fn = Object.create(this.prototype);
if (include) object.include(include);
if (extend) object.extend(extend);
object.created();
this.inherited(object);
return object;
},
init: function(){
var initance = Object.create(this.prototype);
initance.parent = this;
initance.initializer.apply(initance, arguments);
initance.init.apply(initance, arguments);
return initance;
},
proxy: function(func){
var thisObject = this;
return(function(){
return func.apply(thisObject, arguments);
});
},
proxyAll: function(){
var functions = makeArray(arguments);
for (var i=0; i < functions.length; i++)
this[functions[i]] = this.proxy(this[functions[i]]);
},
include: function(obj){
for(var key in obj)
if (moduleKeywords.indexOf(key) == -1)
this.fn[key] = obj[key];
var included = obj.included;
if (included) included.apply(this);
return this; return this;
}, };
Module.extend = function(obj) {
extend: function(obj){ var extended, key, value;
for(var key in obj) if (!obj) {
if (moduleKeywords.indexOf(key) == -1) throw 'extend(obj) requires obj';
this[key] = obj[key]; }
for (key in obj) {
var extended = obj.extended; value = obj[key];
if (extended) extended.apply(this); if (__indexOf.call(moduleKeywords, key) < 0) {
this[key] = value;
}
}
extended = obj.extended;
if (extended) {
extended.apply(this);
}
return this; return this;
};
Module.proxy = function(func) {
return __bind(function() {
return func.apply(this, arguments);
}, this);
};
Module.prototype.proxy = function(func) {
return __bind(function() {
return func.apply(this, arguments);
}, this);
};
function Module() {
if (typeof this.init === "function") {
this.init.apply(this, arguments);
}
} }
}; return Module;
})();
Class.prototype.proxy = Class.proxy; Model = (function() {
Class.prototype.proxyAll = Class.proxyAll; __extends(Model, Module);
Class.inst = Class.init; Model.extend(Events);
Class.sub = Class.create; Model.records = {};
Model.attributes = [];
// Models Model.configure = function() {
var attributes, name;
Spine.guid = function(){ name = arguments[0], attributes = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { this.className = name;
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16);
}).toUpperCase();
};
var Model = Spine.Model = Class.create();
Model.extend(Events);
Model.extend({
setup: function(name, atts){
var model = Model.sub();
if (name) model.name = name;
if (atts) model.attributes = atts;
return model;
},
created: function(sub){
this.records = {}; this.records = {};
this.attributes = []; if (attributes.length) {
this.attributes = attributes;
this.bind("create", this.proxy(function(record){ }
this.trigger("change", "create", record); this.attributes && (this.attributes = makeArray(this.attributes));
})); this.attributes || (this.attributes = []);
this.bind("update", this.proxy(function(record){ this.unbind();
this.trigger("change", "update", record); return this;
})); };
this.bind("destroy", this.proxy(function(record){ Model.toString = function() {
this.trigger("change", "destroy", record); return "" + this.className + "(" + (this.attributes.join(", ")) + ")";
})); };
}, Model.find = function(id) {
var record;
find: function(id){ record = this.records[id];
var record = this.records[id]; if (!record) {
if ( !record ) throw("Unknown record"); throw 'Unknown record';
}
return record.clone(); return record.clone();
}, };
Model.exists = function(id) {
exists: function(id){
try { try {
return this.find(id); return this.find(id);
} catch (e) { } catch (e) {
return false; return false;
} }
}, };
Model.refresh = function(values, options) {
refresh: function(values){ var record, records, _i, _len;
this.records = {}; if (options == null) {
options = {};
for (var i=0, il = values.length; i < il; i++) { }
var record = this.init(values[i]); if (options.clear) {
this.records = {};
}
records = this.fromJSON(values);
if (!isArray(records)) {
records = [records];
}
for (_i = 0, _len = records.length; _i < _len; _i++) {
record = records[_i];
record.newRecord = false; record.newRecord = false;
record.id || (record.id = guid());
this.records[record.id] = record; this.records[record.id] = record;
} }
this.trigger('refresh', !options.clear && records);
this.trigger("refresh"); return this;
}, };
Model.select = function(callback) {
select: function(callback){ var id, record, result;
var result = []; result = (function() {
var _ref, _results;
for (var key in this.records) _ref = this.records;
if (callback(this.records[key])) _results = [];
result.push(this.records[key]); for (id in _ref) {
record = _ref[id];
if (callback(record)) {
_results.push(record);
}
}
return _results;
}).call(this);
return this.cloneArray(result); return this.cloneArray(result);
}, };
Model.findByAttribute = function(name, value) {
findByAttribute: function(name, value){ var id, record, _ref;
for (var key in this.records) _ref = this.records;
if (this.records[key][name] == value) for (id in _ref) {
return this.records[key].clone(); record = _ref[id];
}, if (record[name] === value) {
return record.clone();
findAllByAttribute: function(name, value){ }
return(this.select(function(item){ }
return(item[name] == value); return null;
})); };
}, Model.findAllByAttribute = function(name, value) {
return this.select(function(item) {
each: function(callback){ return item[name] === value;
for (var key in this.records) });
callback(this.records[key]); };
}, Model.each = function(callback) {
var key, value, _ref, _results;
all: function(){ _ref = this.records;
_results = [];
for (key in _ref) {
value = _ref[key];
_results.push(callback(value.clone()));
}
return _results;
};
Model.all = function() {
return this.cloneArray(this.recordsValues()); return this.cloneArray(this.recordsValues());
}, };
Model.first = function() {
first: function(){ var record;
var record = this.recordsValues()[0]; record = this.recordsValues()[0];
return(record && record.clone()); return record != null ? record.clone() : void 0;
}, };
Model.last = function() {
last: function(){ var record, values;
var values = this.recordsValues() values = this.recordsValues();
var record = values[values.length - 1]; record = values[values.length - 1];
return(record && record.clone()); return record != null ? record.clone() : void 0;
}, };
Model.count = function() {
count: function(){
return this.recordsValues().length; return this.recordsValues().length;
}, };
Model.deleteAll = function() {
deleteAll: function(){ var key, value, _ref, _results;
for (var key in this.records) _ref = this.records;
delete this.records[key]; _results = [];
}, for (key in _ref) {
value = _ref[key];
destroyAll: function(){ _results.push(delete this.records[key]);
for (var key in this.records) }
this.records[key].destroy(); return _results;
}, };
Model.destroyAll = function() {
update: function(id, atts){ var key, value, _ref, _results;
this.find(id).updateAttributes(atts); _ref = this.records;
}, _results = [];
for (key in _ref) {
create: function(atts){ value = _ref[key];
var record = this.init(atts); _results.push(this.records[key].destroy());
record.save(); }
return record; return _results;
}, };
Model.update = function(id, atts) {
destroy: function(id){ return this.find(id).updateAttributes(atts);
this.find(id).destroy(); };
}, Model.create = function(atts) {
var record;
sync: function(callback){ record = new this(atts);
this.bind("change", callback); return record.save();
}, };
Model.destroy = function(id) {
fetch: function(callback){ return this.find(id).destroy();
callback ? this.bind("fetch", callback) : this.trigger("fetch"); };
}, Model.change = function(callbackOrParams) {
if (typeof callbackOrParams === 'function') {
toJSON: function(){ return this.bind('change', callbackOrParams);
} else {
return this.trigger('change', callbackOrParams);
}
};
Model.fetch = function(callbackOrParams) {
if (typeof callbackOrParams === 'function') {
return this.bind('fetch', callbackOrParams);
} else {
return this.trigger('fetch', callbackOrParams);
}
};
Model.toJSON = function() {
return this.recordsValues(); return this.recordsValues();
}, };
Model.fromJSON = function(objects) {
fromJSON: function(objects){ var value, _i, _len, _results;
var self = this; if (!objects) {
if (typeof objects == "string") return;
objects = JSON.parse(objects) }
if (typeof objects == "array") if (typeof objects === 'string') {
return($.map(objects, function(){ objects = JSON.parse(objects);
return self.init(this); }
})); if (isArray(objects)) {
else _results = [];
return this.init(objects); for (_i = 0, _len = objects.length; _i < _len; _i++) {
}, value = objects[_i];
_results.push(new this(value));
// Private }
return _results;
recordsValues: function(){ } else {
var result = []; return new this(objects);
for (var key in this.records) }
result.push(this.records[key]); };
return result; Model.fromForm = function() {
}, var _ref;
return (_ref = new this).fromForm.apply(_ref, arguments);
cloneArray: function(array){ };
var result = []; Model.recordsValues = function() {
for (var i=0; i < array.length; i++) var key, result, value, _ref;
result.push(array[i].dup()); result = [];
_ref = this.records;
for (key in _ref) {
value = _ref[key];
result.push(value);
}
return result; return result;
};
Model.cloneArray = function(array) {
var value, _i, _len, _results;
_results = [];
for (_i = 0, _len = array.length; _i < _len; _i++) {
value = array[_i];
_results.push(value.clone());
}
return _results;
};
Model.prototype.newRecord = true;
function Model(atts) {
Model.__super__.constructor.apply(this, arguments);
this.ids = [];
if (atts) {
this.load(atts);
}
} }
}); Model.prototype.isNew = function() {
Model.include({
model: true,
newRecord: true,
init: function(atts){
if (atts) this.load(atts);
},
isNew: function(){
return this.newRecord; return this.newRecord;
}, };
Model.prototype.isValid = function() {
isValid: function(){ return !this.validate();
return(!this.validate()); };
}, Model.prototype.validate = function() {};
Model.prototype.load = function(atts) {
validate: function(){ }, var key, value;
for (key in atts) {
load: function(atts){ value = atts[key];
for(var name in atts) if (typeof this[key] === 'function') {
this[name] = atts[name]; this[key](value);
}, } else {
this[key] = value;
attributes: function(){ }
var result = {}; }
for (var i=0; i < this.parent.attributes.length; i++) {
var attr = this.parent.attributes[i];
result[attr] = this[attr];
}
result.id = this.id;
return result;
},
eql: function(rec){
return(rec && rec.id === this.id &&
rec.parent === this.parent);
},
save: function(){
var error = this.validate();
if ( error ) {
if ( !this.trigger("error", this, error) )
throw("Validation failed: " + error);
}
this.trigger("beforeSave", this);
this.newRecord ? this.create() : this.update();
this.trigger("save", this);
return this; return this;
}, };
Model.prototype.attributes = function() {
updateAttribute: function(name, value){ var key, result, _i, _len, _ref;
result = {};
_ref = this.constructor.attributes;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
key = _ref[_i];
if (key in this) {
if (typeof this[key] === 'function') {
result[key] = this[key]();
} else {
result[key] = this[key];
}
}
}
if (this.id) {
result.id = this.id;
}
return result;
};
Model.prototype.eql = function(rec) {
var _ref, _ref2;
return rec && rec.constructor === this.constructor && (rec.id === this.id || (_ref = this.id, __indexOf.call(rec.ids, _ref) >= 0) || (_ref2 = rec.id, __indexOf.call(this.ids, _ref2) >= 0));
};
Model.prototype.save = function() {
var error, record;
error = this.validate();
if (error) {
this.trigger('error', error);
return false;
}
this.trigger('beforeSave');
record = this.newRecord ? this.create() : this.update();
this.trigger('save');
return record;
};
Model.prototype.updateAttribute = function(name, value) {
this[name] = value; this[name] = value;
return this.save(); return this.save();
}, };
Model.prototype.updateAttributes = function(atts) {
updateAttributes: function(atts){
this.load(atts); this.load(atts);
return this.save(); return this.save();
}, };
Model.prototype.changeID = function(id) {
destroy: function(){ var records;
this.trigger("beforeDestroy", this); this.ids.push(this.id);
delete this.parent.records[this.id]; records = this.constructor.records;
this.trigger("destroy", this); records[id] = records[this.id];
}, delete records[this.id];
this.id = id;
dup: function(){ return this.save();
var result = this.parent.init(this.attributes()); };
result.newRecord = this.newRecord; Model.prototype.destroy = function() {
this.trigger('beforeDestroy');
delete this.constructor.records[this.id];
this.destroyed = true;
this.trigger('destroy');
this.trigger('change', 'destroy');
this.unbind();
return this;
};
Model.prototype.dup = function(newRecord) {
var result;
result = new this.constructor(this.attributes());
if (newRecord === false) {
result.newRecord = this.newRecord;
} else {
delete result.id;
}
return result; return result;
}, };
Model.prototype.clone = function() {
clone: function(){
return Object.create(this); return Object.create(this);
}, };
Model.prototype.reload = function() {
reload: function(){ var original;
if ( this.newRecord ) return this; if (this.newRecord) {
var original = this.parent.find(this.id); return this;
}
original = this.constructor.find(this.id);
this.load(original.attributes()); this.load(original.attributes());
return original; return original;
}, };
Model.prototype.toJSON = function() {
toJSON: function(){ return this.attributes();
return(this.attributes()); };
}, Model.prototype.toString = function() {
return "<" + this.constructor.className + " (" + (JSON.stringify(this)) + ")>";
exists: function(){ };
return(this.id && this.id in this.parent.records); Model.prototype.fromForm = function(form) {
}, var key, result, _i, _len, _ref;
result = {};
// Private _ref = $(form).serializeArray();
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
update: function(){ key = _ref[_i];
this.trigger("beforeUpdate", this); result[key.name] = key.value;
var records = this.parent.records; }
return this.load(result);
};
Model.prototype.exists = function() {
return this.id && this.id in this.constructor.records;
};
Model.prototype.update = function() {
var clone, records;
this.trigger('beforeUpdate');
records = this.constructor.records;
records[this.id].load(this.attributes()); records[this.id].load(this.attributes());
this.trigger("update", records[this.id].clone()); clone = records[this.id].clone();
}, clone.trigger('update');
clone.trigger('change', 'update');
create: function(){ return clone;
this.trigger("beforeCreate", this); };
if ( !this.id ) this.id = Spine.guid(); Model.prototype.create = function() {
this.newRecord = false; var clone, records;
var records = this.parent.records; this.trigger('beforeCreate');
records[this.id] = this.dup(); if (!this.id) {
this.trigger("create", records[this.id].clone()); this.id = guid();
}, }
this.newRecord = false;
bind: function(events, callback){ records = this.constructor.records;
return this.parent.bind(events, this.proxy(function(record){ records[this.id] = this.dup(false);
if ( record && this.eql(record) ) clone = records[this.id].clone();
callback.apply(this, arguments); clone.trigger('create');
})); clone.trigger('change', 'create');
}, return clone;
};
trigger: function(){ Model.prototype.bind = function(events, callback) {
return this.parent.trigger.apply(this.parent, arguments); var binder, unbinder;
} this.constructor.bind(events, binder = __bind(function(record) {
}); if (record && this.eql(record)) {
return callback.apply(this, arguments);
// Controllers }
}, this));
var eventSplitter = /^(\w+)\s*(.*)$/; this.constructor.bind('unbind', unbinder = __bind(function(record) {
if (record && this.eql(record)) {
var Controller = Spine.Controller = Class.create({ this.constructor.unbind(events, binder);
tag: "div", return this.constructor.unbind('unbind', unbinder);
}
initializer: function(options){ }, this));
return binder;
};
Model.prototype.trigger = function() {
var args, _ref;
args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
args.splice(1, 0, this);
return (_ref = this.constructor).trigger.apply(_ref, args);
};
Model.prototype.unbind = function() {
return this.trigger('unbind');
};
return Model;
})();
Controller = (function() {
__extends(Controller, Module);
Controller.include(Events);
Controller.include(Log);
Controller.prototype.eventSplitter = /^(\S+)\s*(.*)$/;
Controller.prototype.tag = 'div';
function Controller(options) {
this.release = __bind(this.release, this);
var key, value, _ref;
this.options = options; this.options = options;
_ref = this.options;
for (var key in this.options) for (key in _ref) {
this[key] = this.options[key]; value = _ref[key];
this[key] = value;
if (!this.el) this.el = document.createElement(this.tag); }
if (!this.el) {
this.el = document.createElement(this.tag);
}
this.el = $(this.el); this.el = $(this.el);
if (this.className) {
if ( !this.events ) this.events = this.parent.events; this.el.addClass(this.className);
if ( !this.elements ) this.elements = this.parent.elements; }
this.release(function() {
if (this.events) this.delegateEvents(); return this.el.remove();
if (this.elements) this.refreshElements(); });
if (this.proxied) this.proxyAll.apply(this, this.proxied); if (!this.events) {
}, this.events = this.constructor.events;
}
$: function(selector){ if (!this.elements) {
this.elements = this.constructor.elements;
}
if (this.events) {
this.delegateEvents();
}
if (this.elements) {
this.refreshElements();
}
Controller.__super__.constructor.apply(this, arguments);
}
Controller.prototype.release = function(callback) {
if (typeof callback === 'function') {
return this.bind('release', callback);
} else {
return this.trigger('release');
}
};
Controller.prototype.$ = function(selector) {
return $(selector, this.el); return $(selector, this.el);
}, };
Controller.prototype.delegateEvents = function() {
delegateEvents: function(){ var eventName, key, match, method, selector, _ref, _results;
for (var key in this.events) { _ref = this.events;
var methodName = this.events[key]; _results = [];
var method = this.proxy(this[methodName]); for (key in _ref) {
method = _ref[key];
var match = key.match(eventSplitter); if (typeof method !== 'function') {
var eventName = match[1], selector = match[2]; method = this.proxy(this[method]);
if (selector === '') {
this.el.bind(eventName, method);
} else {
this.el.delegate(selector, eventName, method);
} }
match = key.match(this.eventSplitter);
eventName = match[1];
selector = match[2];
_results.push(selector === '' ? this.el.bind(eventName, method) : this.el.delegate(selector, eventName, method));
} }
}, return _results;
};
refreshElements: function(){ Controller.prototype.refreshElements = function() {
for (var key in this.elements) { var key, value, _ref, _results;
this[this.elements[key]] = this.$(key); _ref = this.elements;
_results = [];
for (key in _ref) {
value = _ref[key];
_results.push(this[value] = this.$(key));
} }
}, return _results;
};
delay: function(func, timeout){ Controller.prototype.delay = function(func, timeout) {
setTimeout(this.proxy(func), timeout || 0); return setTimeout(this.proxy(func), timeout || 0);
};
Controller.prototype.html = function(element) {
this.el.html(element.el || element);
this.refreshElements();
return this.el;
};
Controller.prototype.append = function() {
var e, elements, _ref;
elements = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
elements = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = elements.length; _i < _len; _i++) {
e = elements[_i];
_results.push(e.el || e);
}
return _results;
})();
(_ref = this.el).append.apply(_ref, elements);
this.refreshElements();
return this.el;
};
Controller.prototype.appendTo = function(element) {
this.el.appendTo(element.el || element);
this.refreshElements();
return this.el;
};
Controller.prototype.prepend = function() {
var e, elements, _ref;
elements = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
elements = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = elements.length; _i < _len; _i++) {
e = elements[_i];
_results.push(e.el || e);
}
return _results;
})();
(_ref = this.el).prepend.apply(_ref, elements);
this.refreshElements();
return this.el;
};
Controller.prototype.replace = function(element) {
var previous, _ref;
_ref = [this.el, element.el || element], previous = _ref[0], this.el = _ref[1];
previous.replaceWith(this.el);
this.delegateEvents();
this.refreshElements();
return this.el;
};
return Controller;
})();
$ = this.jQuery || this.Zepto || function(element) {
return element;
};
if (typeof Object.create !== 'function') {
Object.create = function(o) {
var Func;
Func = function() {};
Func.prototype = o;
return new Func();
};
}
isArray = function(value) {
return Object.prototype.toString.call(value) === '[object Array]';
};
isBlank = function(value) {
var key;
if (!value) {
return true;
}
for (key in value) {
return false;
}
return true;
};
makeArray = function(args) {
return Array.prototype.slice.call(args, 0);
};
guid = function() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r, v;
r = Math.random() * 16 | 0;
v = c === 'x' ? r : r & 3 | 8;
return v.toString(16);
}).toUpperCase();
};
Spine = this.Spine = {};
if (typeof module !== "undefined" && module !== null) {
module.exports = Spine;
}
Spine.version = '1.0.3';
Spine.isArray = isArray;
Spine.isBlank = isBlank;
Spine.$ = $;
Spine.Events = Events;
Spine.Log = Log;
Spine.Module = Module;
Spine.Controller = Controller;
Spine.Model = Model;
Module.extend.call(Spine, Events);
Module.create = Module.sub = Controller.create = Controller.sub = Model.sub = function(instances, statics) {
var result;
result = (function() {
__extends(result, this);
function result() {
result.__super__.constructor.apply(this, arguments);
}
return result;
}).call(this);
if (instances) {
result.include(instances);
} }
}); if (statics) {
result.extend(statics);
Controller.include(Events); }
Controller.include(Log); if (typeof result.unbind === "function") {
result.unbind();
Spine.App = Class.create(); }
Spine.App.extend(Events) return result;
Controller.fn.App = Spine.App; };
})(); Model.setup = function(name, attributes) {
\ No newline at end of file var Instance;
if (attributes == null) {
attributes = [];
}
Instance = (function() {
__extends(Instance, this);
function Instance() {
Instance.__super__.constructor.apply(this, arguments);
}
return Instance;
}).call(this);
Instance.configure.apply(Instance, [name].concat(__slice.call(attributes)));
return Instance;
};
Module.init = Controller.init = Model.init = function(a1, a2, a3, a4, a5) {
return new this(a1, a2, a3, a4, a5);
};
Spine.Class = Module;
}).call(this);
todo-example/spine/lib/spine.model.ajax.js deleted 100644 → 0
View file @ 56a09f6f
(function(Spine, $){
var Model = Spine.Model;
var getUrl = function(object){
if (!(object && object.url)) return null;
return((typeof object.url == "function") ? object.url() : object.url);
};
var methodMap = {
"create": "POST",
"update": "PUT",
"destroy": "DELETE",
"read": "GET"
};
var urlError = function() {
throw new Error("A 'url' property or function must be specified");
};
var ajaxSync = function(method, record){
if (Model._noSync) return;
var params = {
type: methodMap[method],
contentType: "application/json",
dataType: "json",
processData: false
};
if (method == "create" && record.model)
params.url = getUrl(record.parent);
else
params.url = getUrl(record);
if (!params.url) throw("Invalid URL");
if (method == "create" || method == "update") {
var data = {};
if (Model.ajaxPrefix) {
var prefix = record.parent.name.toLowerCase();
data[prefix] = record;
} else {
data = record;
}
params.data = JSON.stringify(data);
}
if (method == "read")
params.success = function(data){
(record.refresh || record.load).call(record, data);
};
params.error = function(xhr, s, e){
record.trigger("ajaxError", xhr, s, e);
};
$.ajax(params);
};
Model.Ajax = {
extended: function(){
this.sync(ajaxSync);
this.fetch(this.proxy(function(){
ajaxSync("read", this);
}));
}
};
Model.extend({
ajaxPrefix: false,
url: function() {
return "/" + this.name.toLowerCase() + "s"
},
noSync: function(callback){
Model._noSync = true;
callback.apply(callback, arguments);
Model._noSync = false;
}
});
Model.include({
url: function(){
var base = getUrl(this.parent);
base += (base.charAt(base.length - 1) == "/" ? "" : "/");
base += encodeURIComponent(this.id);
return base;
}
});
})(Spine, Spine.$);
\ No newline at end of file
todo-example/spine/lib/spine.model.local.js deleted 100644 → 0
View file @ 56a09f6f
Spine.Model.Local = {
extended: function(){
this.sync(this.proxy(this.saveLocal));
this.fetch(this.proxy(this.loadLocal));
},
saveLocal: function(){
var result = JSON.stringify(this);
localStorage[this.name] = result;
},
loadLocal: function(){
var result = localStorage[this.name];
if ( !result ) return;
var result = JSON.parse(result);
this.refresh(result);
}
};
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7