<!doctype html><html lang="en-US" class="loading"><head> <meta charset="utf-8"> <!-- From HTML 5 Boilerplate: Use .htaccess instead. See: h5bp.com/i/378 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello</title>
<meta name="description" content=""> <meta name="viewport" content="width=device-width">
<script data-curl-run="app/run.js" src="bower_components/curl/src/curl.js"></script></head><body>
</body></html>
(function(curl) {
var config = { packages: [ { name: 'cola-test', location: 'app/cola-test' }, // Add third-party packages here { name: 'curl', location: 'bower_components/curl/src/curl' }, { name: 'wire', location: 'bower_components/wire', main: 'wire' }, { name: 'cola', location: 'bower_components/cola', main: 'cola' }, { name: 'when', location: 'bower_components/when', main: 'when' }, { name: 'meld', location: 'bower_components/meld', main: 'meld' }, { name: 'poly', location: 'bower_components/poly' } ], // Turn off automatic locale scanning locale: false, // Polyfill everything ES5-ish preloads: ['poly/es5'] };
curl(config, ['wire!app/main']);
})(curl);
define({ // Wire spec
root: { $ref: 'first!body' },
//hello-component colaTestController: { create: 'cola-test/controller', properties: { collection: { $ref: 'colaTestCollection' }, usernameNode: { $ref: 'first!input[name="username"]', at: 'colaTestInputView' }, firstnameNode: { $ref: 'first!input[name="firstname"]', at: 'colaTestInputView' }, lastnameNode: { $ref: 'first!input[name="lastname"]', at: 'colaTestInputView' } }, on: { colaTestInputView: { 'click:input[type="button"]' : 'addToCollection' } } },
colaTestCollection: { wire: 'cola-test/collection/spec' }, colaTestView: { render: { template: { module: 'text!cola-test/cola-template.html' } }, insert: { after: 'colaTestInputView' }, bind: { to: { $ref: 'colaTestCollection' },// comparator: { module: 'app/list/compareByLastFirst' }, bindings: { username: '.username', firstname: '.firstname', lastname: '.lastname' } } }, colaTestInputView: { render: { template: { module: 'text!cola-test/cola-input.html' } }, insert: { first: 'root' } }, plugins: ['wire/dom', 'wire/dom/render', 'wire/on']});
<div><div>COLA-TEST</div><div><ul> <li> <span class="username"></span> <span class="firstname"></span> <span class="lastname"></span> </li></li></div></div>
<div> <input type="text" name="username" placeholder="Username" /> <input type="text" name="firstname" placeholder="Firstname" /> <input type="text" name="lastname" placeholder="Lastname" /> <input type="button" class="submit" value="add" /></div>
(function(define) {define(function() {
return { addToCollection: function(contact) { this.collection.add( { username: this.usernameNode.value, firstname: this.firstnameNode.value, lastname: this.lastnameNode.value } ); } };
});}(typeof define === 'function' && define.amd ? define : function(factory) { module.exports = factory(require); }));
define({
$exports: { $ref: 'colaTestCollection' },
colaTestCollection: { create: { module: 'cola/Collection'// args: {// strategyOptions: {// validator: { module: 'app/collection/validateContact' }// }// } }, before: { add: 'generateMetadata', update: 'generateMetadata' } },
contactStore: { create: { module: 'cola/adapter/LocalStorage', args: 'cola-demo' },// args: [// { username: 'USERNAME', firstname: 'firstname', lastname: 'LaStNaMe' }// ]// }, bind: { $ref: 'colaTestCollection' } },
//cleanContact: { module: 'app/collection/cleanContact' }, generateMetadata: { module: 'cola-test/collection/generateMetadata' },
$plugins: [ { module: 'wire/dom' }, { module: 'wire/on' }, { module: 'wire/aop' }, { module: 'cola' } ]
});
(function(define) {define(function() {
/** * Since we're using a datastore (localStorage) that doesn't generate ids and such * for us, this transform generates a GUID id and a dateCreated. It can be * injected into a pipeline for creating new todos. */ return function generateMetadata(item) { if (!item.id || item.id.length == 0) { item.id = guidLike(); item.dateCreated = new Date().getTime(); }
return item; };
// GUID-like generation, not actually a GUID, tho, from: function s4() { return (((1+Math.random())*0x10000)|0).toString(16).substring(1); }
function guidLike() { return (s4()+s4()+"-"+s4()+"-"+s4()+"-"+s4()+"-"+s4()+s4()+s4()); }
});}(typeof define === 'function' && define.amd ? define : function(factory) { module.exports = factory(require); }));