Struggling with cola

38 views
Skip to first unread message

Iulius Gutberlet

unread,
Aug 7, 2014, 5:00:42 PM8/7/14
to cuj...@googlegroups.com

Hi,

after a while I got back to cujo and currently try to implement a small demo app with it. I came across some things and I am certain that I will have to ask a few more questions, but the most pressing issue to me is the cola integration.
I can't seem to get it working in my setup and I am struggling for a day now. Any hint is appreciated:

my index.html
<!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>

my run.js
(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);

main.js
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']
});

cola-template.html
<div>
<div>COLA-TEST</div>
<div>
<ul>
  <li>
    <span class="username"></span>
    <span class="firstname"></span>
    <span class="lastname"></span>
  </li>
</li>
</div>
</div>

cola-input.html
<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>

controller.js
(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); }));

spec.js
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' }
]

});

generateMetadata.js (taken from the contacts example)
(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); }));

The code in general seems to work fine, whatever I enter is actually added to the local storage, but the presentation of the local storage content is not working at all and I seem to miss something.
As I said, any help is appreciated!

Best,

Iulius


Brian Cavalier

unread,
Aug 19, 2014, 2:07:04 PM8/19/14
to cuj...@googlegroups.com
Hey lulius,

Your code looks pretty good.  I think all you need to do is to make sure that the 'cola' wire plugin is enabled in *each* wire spec where you use the 'bind' facet (which is provided by the cola plugin).  So, add it to main.js and everything should work.  Let us know if that helps!

Brian

foxdonut

unread,
Dec 8, 2014, 10:28:26 AM12/8/14
to cuj...@googlegroups.com
In case someone comes back to this post, this worked for me:

In main.js, add 'cola' on this line:

plugins: ['wire/dom', 'wire/dom/render', 'wire/on', 'cola']

Cheers,
FD
Reply all
Reply to author
Forward
0 new messages