ractive
Version:
Next-generation DOM manipulation
1 lines • 19.8 kB
JavaScript
(function(t){"use strict";var e,i,n;e=function(t){var n,r;if(t)for(r in t)t.hasOwnProperty(r)&&(this[r]=t[r]);n={preserveWhitespace:!1,async:!1,maxBatch:50,append:!1,twoway:!0,formatters:{}};for(r in n)void 0===this[r]&&(this[r]=n[r]);if(void 0!==this.el&&(this.el=i(this.el)),void 0===this.viewmodel&&(this.viewmodel=new e.ViewModel),this.data&&this.viewmodel.set(this.data),this.partials)for(r in this.partials)if(this.partials.hasOwnProperty(r)&&"string"==typeof this.partials[r]){if(!e.compile)throw Error('Missing Anglebars.compile - cannot compile partial "'+r+'". Either precompile or use the version that includes the compiler');this.partials[r]=e.compile(this.partials[r],this)}if("string"==typeof this.template){if(!e.compile)throw Error("Missing Anglebars.compile - cannot compile template. Either precompile or use the version that includes the compiler");this.template=e.compile(this.template,this)}this.el&&this.render({el:this.el,callback:this.callback,append:this.append}),this._subs={}},e.prototype={queue:function(t){this._queue=t.concat(this._queue||[]),this._dispatchingQueue||this.dispatchQueue()},dispatchQueue:function(){var t,i,r=this;i=this.maxBatch,t=function(){for(var s,o=+new Date;r._queue.length&&i>new Date-o;)s=r._queue.shift(),s.parentFragment.items[s.index]=e.DomViews.create(s);r._queue.length?n(t):(r._dispatchingQueue=!1,r.callback&&(r.callback(),delete r.callback),r.async=!1)},this._dispatchingQueue=!0,n(t)},render:function(t){var n=t.el?i(t.el):this.el;if(!n)throw Error("You must specify a DOM element to render to");t.append||(n.innerHTML=""),t.callback&&(this.callback=t.callback),this.rendered=new e.DomViews.Fragment({model:this.template,anglebars:this,parentNode:n}),!this.async&&t.callback&&t.callback()},teardown:function(){this.rendered.teardown()},set:function(){return this.el.style.display,this.viewmodel.set.apply(this.viewmodel,arguments),this},get:function(){return this.viewmodel.get.apply(this.viewmodel,arguments)},update:function(){return this.viewmodel.update.apply(this.viewmodel,arguments),this},_format:function(t,i){var n,r,s,o,a,h;if(!i)return t;for(r=i.length,n=0;r>n;n+=1)s=i[n],o=s.name,a=s.args||[],h=this.formatters[o]||e.formatters[o],h&&(t=h.apply(this,[t].concat(a)));return t}},i=function(t){var e;if(!t)throw Error("No container element specified");if(t.tagName)return t;if("string"==typeof t&&(e=document.getElementById(t),!e&&document.querySelector&&(e=document.querySelector(t)),e.tagName))return e;if(t[0]&&t[0].tagName)return t[0];throw Error("Could not find container element")},n=function(){var t,e,i=["ms","moz","webkit","o"];if("undefined"!=typeof window){if(window.requestAnimationFrame)return function(t){window.requestAnimationFrame(t)};for(e=function(t){return window[i[t]+"RequestAnimationFrame"]?function(e){window[i[t]+"RequestAnimationFrame"](e)}:void 0},t=0;i.length>t;t+=1)e(t);return function(t){setTimeout(t,16)}}}(),e.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)},e.isObject=function(t){return"[object Object]"===Object.prototype.toString.call(t)&&"function"!=typeof t},e.types={TEXT:1,INTERPOLATOR:2,TRIPLE:3,SECTION:4,INVERTED:5,CLOSING:6,ELEMENT:7,PARTIAL:8,COMMENT:9,DELIMCHANGE:10,MUSTACHE:11,TAG:12,ATTR_VALUE_TOKEN:13},function(t){t.on=function(t,e){var i=this;return this._subs[t]?this._subs[t].push(e):this._subs[t]=[e],{cancel:function(){i.off(t,e)}}},t.off=function(t,e){var i,n;e||(t?this._subs[t]=[]:this._subs={}),i=this._subs[t],i&&(n=i.indexOf(e),-1!==n&&i.splice(n,1))},t.fire=function(t){var e,i,n,r=this._subs[t];if(r)for(e=Array.prototype.slice.call(arguments,1),i=0,n=r.length;n>i;i+=1)r[i].apply(this,e)}}(e.prototype),e.formatters={equals:function(t,e){return t===e},greaterThan:function(t,e){return t>e},greaterThanEquals:function(t,e){return t>=e},lessThan:function(t,e){return e>t},lessThanEquals:function(t,e){return e>=t}},function(t){var e,i,n;t.ViewModel=function(t){this.data=t||{},this.pendingResolution=[],this.observers={}},t.ViewModel.prototype={set:function(t,e){var n,r,s,o,a,h,l;if("object"!=typeof t){for(r=i(t),o=this.data;r.length>1;)s=r.shift(),o=o[s]||{};for(s=r[0],o[s]=e,this._notifyObservers(t,e),a=this.pendingResolution.length;a--;)h=this.pendingResolution.splice(a,1)[0],l=this.getFullKeypath(h.view.model.ref,h.view.contextStack),void 0!==l?h.callback(l):this.registerUnresolvedKeypath(h)}else for(n in t)t.hasOwnProperty(n)&&this.set(n,t[n])},get:function(t){var e,n;if(!t)return void 0;for(e=i(t),n=this.data;e.length;)if(n&&(n=n[e.shift()]),void 0===n)return n;return n},update:function(t){var e=this.get(t);this._notifyObservers(t,e)},registerView:function(t){var e,i,n,r,s=this;return t.parentFragment&&t.model.ref in t.parentFragment.indexRefs?(r=t.parentFragment.indexRefs[t.model.ref],n=t.model.fmtrs?t.anglebars._format(r,t.model.fmtrs):r,t.update(n),void 0):(i=function(e){t.keypath=e,t.observerRefs=s.observe({keypath:e,priority:t.model.p||0,view:t}),n=s.get(e),t.model.fmtrs&&(n=t.anglebars._format(n,t.model.fmtrs)),t.update(n)},e=this.getFullKeypath(t.model.ref,t.contextStack),void 0===e?this.registerUnresolvedKeypath({view:t,callback:i}):i(e),void 0)},getFullKeypath:function(t,e){var i;if("."===t)return e[e.length-1];for(e=e.concat();e.length;)if(i=e.pop(),void 0!==this.get(i+"."+t))return i+"."+t;return void 0!==this.get(t)?t:void 0},registerUnresolvedKeypath:function(t){this.pendingResolution[this.pendingResolution.length]=t},_notifyObservers:function(t,e){var i,n,r,s,o,a=this,h=this.observers[t]||[];for(i=0;h.length>i;i+=1)if(r=h[i])for(n=0;r.length>n;n+=1)s=r[n],o=t!==s.originalAddress?a.get(s.originalAddress):e,s.view&&(s.view.model.fmtrs&&(o=s.view.anglebars._format(o,s.view.model.fmtrs)),s.view.update(o)),s.callback&&s.callback(o)},observe:function(t){var e,i,n=this,r=t.keypath,s=t.priority,o=[];if(2===arguments.length&&"string"==typeof arguments[0]&&"function"==typeof arguments[1])return this.observe({keypath:arguments[0],callback:arguments[1],priority:0});if(!t.keypath)return void 0;for(i=function(e){var i,a;i=n.observers[e]=n.observers[e]||[],i=i[s]=i[s]||[],a={originalAddress:r},t.view&&(a.view=t.view),t.callback&&(a.callback=t.callback),i[i.length]=a,o[o.length]={keypath:e,priority:s,observer:a}},e=t.keypath;-1!==e.lastIndexOf(".");)i(e),e=e.substr(0,e.lastIndexOf("."));return i(e),o},unobserve:function(t){var e,i,n;if(e=this.observers[t.keypath],e&&(i=e[t.priority])){if(i.indexOf)n=i.indexOf(t.observer);else for(var r=0,s=i.length;s>r;r+=1)if(i[r]===t.observer){n=r;break}-1!==n&&(i.splice(n,1),0===i.length&&delete e[t.priority],0===e.length&&delete this.observers[t.keypath])}},unobserveAll:function(t){for(;t.length;)this.unobserve(t.shift())}},t.ViewModel.prototype.cancelKeypathResolution=Array.prototype.filter?function(t){this.pendingResolution=this.pendingResolution.filter(function(e){return e.view!==t})}:function(t){var e,i=[];for(e=0;this.pendingResolution.length>e;e+=1)this.pendingResolution[e].view!==t&&(i[i.length]=this.pendingResolution[e]);this.pendingResolution=i},i=function(t){var e,i,r=[];for(e=t.split("."),i=0;e.length>i;i+=1)r=r.concat(n(e[i]));return r},e=/\[([0-9]+)\]/,n=function(t){var i,n,r,s;if(i=t.indexOf("["),-1===i)return t;for(s=[t.substr(0,i)],n=t.substring(i);n.length;){if(r=e.exec(n),!r)return s;s[s.length]=+r[1],n=n.substring(r[0].length)}return s}}(e),function(t){var e,i,n,r,s,o,a,h;n=t.types,r=[],r[n.TEXT]="Text",r[n.INTERPOLATOR]="Interpolator",r[n.TRIPLE]="Triple",r[n.SECTION]="Section",r[n.ELEMENT]="Element",r[n.PARTIAL]="Partial",o=t.isArray,a=t.isObject,h=function(t,e){return t.contains?t.contains(e):!0},s=function(t,e,i){var n,r,s,o=[];for(i=i||null,n=document.createElement("div"),n.innerHTML=t,s=n.childNodes.length,r=0;s>r;r+=1)o[r]=n.childNodes[r];for(r=0;s>r;r+=1)e.insertBefore(o[r],i);return o},e=function(t){var e;return e=function(t){this.model=t.model,this.anglebars=t.anglebars,this.viewmodel=t.anglebars.viewmodel,this.parentNode=t.parentNode,this.parentFragment=t.parentFragment,this.contextStack=t.contextStack||[],this.anchor=t.anchor,this.index=t.index,this.type=t.model.type,this.initialize(),this.viewmodel.registerView(this),!this.keypath&&this.model.inv&&this.update(!1)},e.prototype=t,e},i=t.DomViews={create:function(t){return"string"==typeof t.model?new i.Text(t):new i[r[t.model.type]](t)}},i.Fragment=function(t,e){var n,r,o,a,h,l;if("string"==typeof t.model)return this.nodes=s(t.model,t.parentNode,t.anchor),void 0;if(a=t.anglebars.async,this.owner=t.owner,this.index=t.index,this.indexRefs={},this.owner&&this.owner.parentFragment){h=this.owner.parentFragment.indexRefs;for(l in h)h.hasOwnProperty(l)&&(this.indexRefs[l]=h[l])}for(t.indexRef&&(this.indexRefs[t.indexRef]=t.index),a||(o={anglebars:t.anglebars,parentNode:t.parentNode,contextStack:t.contextStack,anchor:t.anchor,parentFragment:this}),this.items=[],this.queue=[],n=t.model.length,r=0;n>r;r+=1)a?(o={index:r,model:t.model[r],anglebars:t.anglebars,parentNode:t.parentNode,contextStack:t.contextStack,anchor:t.anchor,parentFragment:this},this.queue[this.queue.length]=o):(o.model=t.model[r],o.index=r,this.items[r]=i.create(o));a&&!e&&(t.anglebars.queue(this.queue),delete this.queue)},i.Fragment.prototype={teardown:function(){var t;if(this.nodes)for(;this.nodes.length;)t=this.nodes.pop(),t.parentNode.removeChild(t);else for(;this.items.length;)this.items.pop().teardown()},firstNode:function(){return this.items[0]?this.items[0].firstNode():this.parentSection?this.parentSection.findNextNode(this):null},findNextNode:function(t){var e;return e=t.index,this.items[e+1]?this.items[e+1].firstNode():this.parentSection?this.parentSection.findNextNode(this):null}},i.Partial=function(t){this.fragment=new i.Fragment({model:t.anglebars.partials[t.model.ref]||[],anglebars:t.anglebars,parentNode:t.parentNode,contextStack:t.contextStack,anchor:t.anchor,owner:this})},i.Partial.prototype={teardown:function(){this.fragment.teardown()}},i.Text=function(t){this.node=document.createTextNode(t.model),this.index=t.index,this.anglebars=t.anglebars,this.parentNode=t.parentNode,this.parentNode.insertBefore(this.node,t.anchor||null)},i.Text.prototype={teardown:function(){h(this.anglebars.el,this.node)&&this.parentNode.removeChild(this.node)},firstNode:function(){return this.node}},i.Element=function(t){var e,n,r,s,o,a;if(n=this.model=t.model,this.anglebars=t.anglebars,this.viewmodel=t.anglebars.viewmodel,this.parentFragment=t.parentFragment,this.parentNode=t.parentNode,this.index=t.index,n.attrs&&n.attrs.xmlns){if(r=n.attrs.xmlns,"string"!=typeof r)throw"Namespace attribute cannot contain mustaches"}else r=this.parentNode.namespaceURI;this.node=document.createElementNS(r,n.tag),this.attributes=[];for(o in n.attrs)n.attrs.hasOwnProperty(o)&&(a=n.attrs[o],s=new i.Attribute({owner:this,name:o,value:a,anglebars:t.anglebars,parentNode:this.node,contextStack:t.contextStack}),"value"!==o||!this.anglebars.twoway||"input"!==n.tag.toLowerCase()&&"textarea"!==n.tag.toLowerCase()||(e=s),this.attributes[this.attributes.length]=s);e&&this.bind(e,t.anglebars.lazy),n.frag&&("string"==typeof n.frag?this.node.innerHTML=n.frag:this.children=new i.Fragment({model:n.frag,anglebars:t.anglebars,parentNode:this.node,contextStack:t.contextStack,anchor:null,owner:this})),this.parentNode.insertBefore(this.node,t.anchor||null)},i.Element.prototype={bind:function(e,i){var n,r,s,o,a=this.viewmodel,h=this.node;if(r=!0,!e.children||1!==e.children.length||e.children[0].type!==t.types.INTERPOLATOR||e.children[0].model.formatters&&e.children[0].model.formatters.length)throw"Not a valid two-way data binding candidate - must be a single interpolator with no formatters";s=e.children[0],o=s.keypath||s.model.partialKeypath,n=function(){var t=h.value;"0"===t?t=0:""!==t&&(t=+t||t),a.set(o,t)},n(),h.addEventListener("change",n),i||h.addEventListener("keyup",n)},teardown:function(){for(h(this.anglebars.el,this.node)&&this.parentNode.removeChild(this.node),this.children&&this.children.teardown();this.attributes.length;)this.attributes.pop().teardown()},firstNode:function(){return this.node}},i.Attribute=function(e){var i,n,r,s,o,a,h;if(n=e.name,r=e.value,s=n.indexOf(":"),-1!==s){if(o=n.substr(0,s),"xmlns"===o)a=null;else for(h=e.parentNode;h&&!a;)a=h.getAttribute("xmlns:"+o),h=h.parentNode||e.owner.parentFragment.owner.node||e.owner.parentFragment.owner.parentNode;a&&(this.namespace=a)}if("string"==typeof r)return a?e.parentNode.setAttributeNS(a,n.replace(o+":",""),r):e.parentNode.setAttribute(n,r),void 0;for(this.parentNode=e.parentNode,this.name=n,this.children=[],i=r.length;i--;)this.children[i]=t.TextViews.create({model:r[i],anglebars:e.anglebars,parent:this,contextStack:e.contextStack});this.update()},i.Attribute.prototype={teardown:function(){if(this.children)for(;this.children.length;)this.children.pop().teardown()},bubble:function(){this.update()},update:function(){var t=this.value;this.value=""+this,this.value!==t&&(this.namespace?this.parentNode.setAttributeNS(this.namespace,this.name,this.value):this.parentNode.setAttribute(this.name,this.value))},toString:function(){return this.children.join("")}},i.Interpolator=e({initialize:function(){this.node=document.createTextNode(""),this.parentNode.insertBefore(this.node,this.anchor||null)},teardown:function(){this.observerRefs?this.viewmodel.unobserveAll(this.observerRefs):this.viewmodel.cancelKeypathResolution(this),h(this.anglebars.el,this.node)&&this.parentNode.removeChild(this.node)},update:function(t){t!==this.text&&(this.text=t,this.node.data=t)},firstNode:function(){return this.node}}),i.Triple=e({initialize:function(){this.nodes=[]},teardown:function(){if(h(this.anglebars.el,this.parentNode))for(;this.nodes.length;)this.parentNode.removeChild(this.nodes.pop());this.observerRefs?this.viewmodel.unobserveAll(this.observerRefs):this.viewmodel.cancelKeypathResolution(this)},firstNode:function(){return this.nodes[0]?this.nodes[0]:this.parentFragment.findNextNode(this)},update:function(t){var e;if(t!==this.html){for(this.html=t;this.nodes.length;)this.parentNode.removeChild(this.nodes.pop());e=this.anchor||this.parentFragment.findNextNode(this),this.nodes=s(t,this.parentNode,e)}}}),i.Section=e({initialize:function(){this.views=[],this.length=0},teardown:function(){this.unrender(),this.observerRefs?this.viewmodel.unobserveAll(this.observerRefs):this.viewmodel.cancelKeypathResolution(this)},firstNode:function(){return this.views[0]?this.views[0].firstNode():this.parentFragment.findNextNode(this)},findNextNode:function(t){return this.views[t.index+1]?this.views[t.index+1].firstNode():this.parentFragment.findNextNode(this)},unrender:function(){for(;this.views.length;)this.views.shift().teardown()},update:function(t){var e,n,r,s,h,l;if(this.anglebars.async&&(this.queue=[]),h={model:this.model.frag,anglebars:this.anglebars,parentNode:this.parentNode,anchor:this.parentFragment.findNextNode(this),owner:this},l=o(t),l&&0===t.length&&(e=!0),this.model.inv){if(t&&!e){if(this.length)return this.unrender(),this.length=0,void 0}else if(!this.length)return s=this.parentFragment.findNextNode(this),h.contextStack=this.contextStack,h.index=0,this.views[0]=new i.Fragment(h),this.length=1,void 0}else if(l){if(t.length<this.length)for(r=this.views.splice(t.length,this.length-t.length);r.length;)r.pop().teardown();else if(t.length>this.length){for(n=this.length;t.length>n;n+=1)h.contextStack=this.contextStack.concat(this.keypath+"."+n),h.index=n,this.model.i&&(h.indexRef=this.model.i),this.views[n]=new i.Fragment(h,!0),this.anglebars.async&&(this.queue=this.queue.concat(this.views[n].queue));this.anglebars.async&&this.anglebars.queue(this.queue)}this.length=t.length}else a(t)?this.length||(h.contextStack=this.contextStack.concat(this.keypath),h.index=0,this.views[0]=new i.Fragment(h),this.length=1):t&&!e?this.length||(h.contextStack=this.contextStack,h.index=0,this.views[0]=new i.Fragment(h),this.length=1):this.length&&(this.unrender(),this.length=0)}})}(e),function(t){var e,i,n,r,s,o;n=t.types,r=[],r[n.TEXT]="Text",r[n.INTERPOLATOR]="Interpolator",r[n.TRIPLE]="Triple",r[n.SECTION]="Section",s=t.isArray,o=t.isObject,e=function(t){var e;return e=function(t){this.model=t.model,this.anglebars=t.anglebars,this.viewmodel=t.anglebars.viewmodel,this.parent=t.parent,this.contextStack=t.contextStack||[],this.type=t.model.type,this.initialize&&this.initialize(),this.viewmodel.registerView(this),!this.keypath&&this.model.inv&&this.update(!1)},e.prototype=t,e},i=t.TextViews={create:function(t){return"string"==typeof t.model?new i.Text(t.model):new i[r[t.model.type]](t)}},i.Fragment=function(t){var e,n,r,s,o;if(this.parent=t.parent,this.items=[],this.indexRefs={},this.owner){s=this.owner.parentFragment.indexRefs;for(o in s)s.hasOwnProperty(o)&&(this.indexRefs[o]=s[o])}for(t.indexRef&&(this.indexRefs[t.indexRef]=t.index),r={anglebars:t.anglebars,parent:this,contextStack:t.contextStack},e=t.models?t.models.length:0,n=0;e>n;n+=1)r.model=this.models[n],this.items[this.items.length]=i.create(r);this.value=this.items.join("")},i.Fragment.prototype={bubble:function(){this.value=this.items.join(""),this.parent.bubble()},teardown:function(){var t,e;for(t=this.items.length,e=0;t>e;e+=1)this.items[e].teardown()},toString:function(){return void 0===this.value?"":this.value}},i.Text=function(t){this.text=t},i.Text.prototype={toString:function(){return this.text},teardown:function(){}},i.Interpolator=e({update:function(t){this.value=t,this.parent.bubble()},bubble:function(){this.parent.bubble()},teardown:function(){this.observerRefs?this.viewmodel.unobserveAll(this.observerRefs):this.viewmodel.cancelKeypathResolution(this)},toString:function(){return void 0===this.value?"":this.value}}),i.Triple=i.Interpolator,i.Section=e({initialize:function(){this.children=[],this.length=0},teardown:function(){this.unrender(),this.observerRefs?this.viewmodel.unobserveAll(this.observerRefs):this.viewmodel.cancelKeypathResolution(this)},unrender:function(){for(;this.children.length;)this.children.shift().teardown();this.length=0},bubble:function(){this.value=this.children.join(""),this.parent.bubble()},update:function(t){var e,n,r;if(s(t)&&0===t.length&&(e=!0),this.model.inv)return t&&!e?this.length&&(this.unrender(),this.length=0):this.length||(this.children[0]=new i.Fragment(this.model.frag,this.anglebars,this,this.contextStack),this.length=1),this.value=this.children.join(""),this.parent.bubble(),void 0;if("object"==typeof t)if(s(t)){if(t.length<this.length)for(r=this.children.splice(t.length,this.length-t.length);r.length;)r.shift().teardown();else{for(n=0;this.length>n;n+=1)this.viewmodel.update(this.keypath+"."+n);if(t.length>this.length)for(n=this.length;t.length>n;n+=1)this.children[n]=new i.Fragment(this.model.frag,this.anglebars,this,this.contextStack.concat(this.keypath+"."+n))}this.length=t.length}else this.length||(this.children[0]=new i.Fragment(this.model.frag,this.anglebars,this,this.contextStack.concat(this.keypath)),this.length=1);else t&&!e?this.length||(this.children[0]=new i.Fragment(this.model.frag,this.anglebars,this,this.contextStack),this.length=1):this.length&&(this.unrender(),this.length=0);this.value=this.children.join(""),this.parent.bubble()},toString:function(){return void 0===this.value?"":this.value}})}(e),function(t){t.extend=function(e){var i,n,r;i=this,n=function(){t.apply(this,arguments),this.init&&this.init.apply(this,arguments)};for(r in i.prototype)i.prototype.hasOwnProperty(r)&&(n.prototype[r]=i.prototype[r]);for(r in e)if(e.hasOwnProperty(r)){if(t.prototype.hasOwnProperty(r))throw Error('Cannot override "'+r+'" method or property of Anglebars prototype');n.prototype[r]=e[r]}return n.extend=i.extend,n}}(e),"undefined"!=typeof module&&module.exports?module.exports=e:"function"==typeof define&&define.amd?define(function(){return e}):t.Anglebars=e})(this);