Tutorial / example for cola needed

[Iulius Gutberlet]

Hi,

I am currently working on a smaller Javascript project and intend to use cujojs. I am currently at the state, where I got everything working with wire, connected some service with each etc. Now I want to try to bind JSON data from a web service call or basically a JSON array for testing to a list. As I understood, the natural way with cujojs would be cola. However it is still marked as alpha (remember, I want to use it in production soon!), so the first question of mine is whether it is safe to use cola in the first place.
If it's safe, I cannot find any documentation on how to bind data from a controller to a view template, e.g.

my view template:

<ul bind="{controller.jsonArray}">
  <li><label for="question-id-input" value="{questionId-bound-with-cola}" /><input type="text" value="{value-to-bind-with-cola}" /></li>
</ul>

my data structure:

jsonArray: [
  { 'questionId-bound-with-cola': 'qid', 'value-to-bind-with-cola': '' }
]

my wire spec:
define(function() {
  myView: {
    render: {
      template: {
        module: 'text!app/myview/my-view-template.html'
      }
    }
  },
  myController: {
    module: 'app/myview/my-view-controller'
  }
};

Basiclly, how to I make the view template aware of data supplied by the controller, how do I bind the data? If anything remains unclear, let me know, I hope I can explain it in more detail then :)
Thanks for your help in advance.

- Iulius

[unscriptable]

Hello Iulius,

cola.js is "alpha" because we've decided that it's not "open" enough for cujo.js.  It's very reliable and robust in its current state, so you can use it safely in production.  

However, we might be changing it significantly in the near future.  We are prototyping a more open solution that allows devs to use other, popular modeling tools,

such as backbone, and still work with popular template engines, like mustache.  We've had great success so far, but have not finished the prototyping exercise.

My guess is that if you choose to use cola.js now, you will be able to reuse all of your templates and your data sources *as is* when you decide to upgrade

to the next cola.js.  It's the parts in the middle that might change: your use of the cola/Collection module and the "bind" facet will likely change somewhat.  

If you have custom logic in controllers that relies on object literals, they could also possibly need refactoring, depending upon whether you decide to switch

to backbone for modeling.  We'll very likely offer an option to continue using plain object literals instead of backbone models, but we haven't designed 

those parts of our prototypes, yet.

It will probably be another two weeks before we are done prototyping a backbone solution.  It'll be several weeks before we have a solution that doesn't

require backbone.

Let us know how you would like to proceed and we can answer your other questions. :)

Thanks for choosing cujo.js!

-- John

[Denis Savenok]

Hello, John,

can we use cola in production, although 0.1.6 tagged master fails in tests?

Thanks,

Denis

[unscriptable]

Hey Denis,

Sorry about the failing tests.  cola.js 0.1.6 is stable and works correctly in all supported browsers (IE8+ with an ES5 shim such as cujojs/poly).  We probably won't fix those tests since we've been focusing on a complete rewrite.  We don't have a timeframe for the rewrite, but we hope to have something to demo soon.

The new cola may be considerably different from the old/current cola.  However, it seems like it would be possible to build a compatibility layer or migration tool.  Hopefully, some community members will help us with that.  

Regards,

-- John

[Denis Savenok]

Hey John,

I explored the code (current dev branch), played a little bit with contacts sample app, but I still can't make the form show validation errors. https://github.com/know-cujojs/contacts/blob/master/app/main.js#L65-L72 - it seems to be enough for two-way binding since listView item click returns it to named form fields, but what should be added to a spec to make the effect?

[unscriptable]

Hey Denis,

You can hook into the contactCollection's onValidate event.

contactsCollection: { 

wire: 'app/collection/spec',

connect: {

onValidate: { compose: 'myController.doSomething' }

}

},

You'll probably want to also hook into some other events (onSubmit, onAbort) to undo some things, too.

-- John

[Denis Savenok]

Hey John,

thank you for the answer! I have another problem with adding item to collection on the fly, i.e. when collection source (ArrayAdapter is used) is bound to NodeListAdapter already. 

How to avoid explicit default identifier "id" in collection item (https://gist.github.com/designeng/11372318)?

UPD. Current index obviously stored in listCollection.adapters[0]._index and it's possible to get it, but I want to find a more elegant solution... or I need to use customised adapter for that?

[unscriptable]

Is `port` the natural key for this data model?  (i.e. is `port` a unique identifier?)  If so, then you can skip the `id` property by adding a a custom identifier to the collection:

// custom identifier
identifyByPort: { module: 'cola/identifier/property', args: [ 'port' ] }

listCollection: {
    create: {
        module: 'cola/Collection',
        // use the custom identifier as a constructor option
        args: { identifier: { $ref: 'identifyByPort' } }
    }
}

You can also add the custom identifier in the `bind` facet similar to using the `comparator` option, but this make less sense to me, atm. :)

-- John

On Monday, April 28, 2014 9:57:20 AM UTC-4, Denis Savenok wrote:

Hey John,

thank you for the answer! I have another problem with adding item to collection on the fly, i.e. when collection source (ArrayAdapter is used) is bound to NodeListAdapter already. 

How to avoid explicit "id" in collection item (https://gist.github.com/designeng/11372318)?

[Denis Savenok]

Thank you for quick response, it works and very useful feature

(https://github.com/cujojs/cola/blob/dev/cola.js#L47, https://github.com/cujojs/cola/blob/dev/identifier/property.js#L13-L15)

-- Denis

[Denis Savenok]

What is the best way to determine the moment when collection is rendered in the node?  I am looking for something like this

    myCollection:

        create:

            module: 'cola/Collection'

        ready:

            "addSource": {$ref: "source"}

        after:

            on[EventType]: "controller.on[EventType]"

The question is what is the appropriate EventType for rendering phase.

The same is about 'wire/dom/render' plugin usage: is it possible to find when the view is rendered? (UPD: obviously we can inject the view as the property in controller and have it rendered yet to "ready" phase, but what if we are going to listen to event?)

[unscriptable]

Hey Denis,

I'm interested in your use case.  Typically, you don't need to listen for an event to know when a node is rendered.  The act of referencing an element component ensures that it has been rendered before you obtain the reference.  

myController: {

    create: 'myController',

    properties: {

        viewNode: { $ref: 'myView' }

    }

}

If myView is an element (created with the wire/dom/render factory or the element factory, for instance), then it will be fully rendered and inserted into the dom (if you specified an insert location).

Does that fulfill your requirements?

-- John