Best way to create templates

[Kendall Arneaud]

I'm reading up on creating templates and I was wondering how to instantiate templates in the soma.Application that are instantiated by data-template. What's the best way to do it? Also is there a way to bind elements to events the way backbone.js does it?

[Kendall Arneaud]

How would a template created in an soma.Application know which object model to use if the soma.Application has multiple "object models" 

[Romuald Quantin]

data-template is a nice-to-have in the soma-template library, it has nothing to do with the framework. I suggest you create the template using the application instance.

In the application instance:

this.createTemplate(MyTemplate, document.getElementById('myDomElement'));

Or in another function, such as a mediator:

function MyMediator(target, instance) {
    instance.createTemplate(MyTemplate, document.getElementById('myDomElement'));
}

You don't bind elements to events in soma.js. Instead you can create a mediator to represent a DOM Element, or a template. A template will make you able to use events, such as "data-click", "data-keydown" and so on. You will find a lot of examples in the demos, check the todo demo.

[Romuald Quantin]

The template doesn't need to know which model you need, the template can ask for the right one using its name, as a variable or in the constructor:

this.injector.mapClass('myFirstModel', Model1, true);
this.injector.mapClass('anotherModel', Model2, true);

function MyTemplate1(template, scope, myFirstModel) {

}

function MyTemplate2(template, scope, anotherModel) {

}

[Kendall Arneaud]

Ahhh i see...gotcha!

[Kendall Arneaud]

Ok ok I'm trying to grasp the concept here.

I'm trying to create a communicative relationship between a DOM form and several data model objects where by the interaction and values from the dom form trigger/ populate the data methods/ properties

In reading your principle logic would it be then to construct a single mediator that references a template class and the various data models then use the media to construct the binding events/ function logic for each? thus my pseudo code would be some like

create 

Model1

Model2

Model3

create 

View Template

create form mediator function(view,model1,model2,model3){

  addeventlisteners from view to model to update respective properties and methods

}

should I be including soma events into this?

[Romuald Quantin]

Hi Kendall,

Yes that would look good I guess.

You could reduce the number of classes by having only the template:

function ViewTemplate(scope, template, element, model1, model2, model3) {

}

But having a template and a mediator would also work, as long as the mediator does all the framework communication and the template view provides methods to update the view.

I have a similar example on the site, between:

http://somajs.github.io/somajs/site/#simple-mediator-example

and:

http://somajs.github.io/somajs/site/#decoupling-communication

The first example has only one mediator, doing both DOM update and handling framework communications. The second example has one mediator doing only the DOM update and another mediator doing the framework communications and updating the first mediator. Very decoupled.

They are both good, one is more complicated but the code is more decoupled. Only a matter of choice here, and "level of decoupling" you need. There's no need to make things unnecessary complicated though. Adapt the solution to your needs.

About the events versus using methods on object, it is usually a matter of "re-using" actions. 

When the data of a model changes:

model --> views/mediators

It is usually good to dispatch an event and have a views and/or mediators listening to it. It makes you free to stop listening, monitor the events, using the same events in new views, and so on.

In the other way:

views/mediators --> model

You can also use events, but it is not a problem at all to use a model method if the model is already accessible.

In this app example, the view doesn't know about the model, it uses events in both ways:

https://github.com/somajs/somajs/blob/master/demos/todo/js/todos/views/views.js

In this one, the view is considered more as a mediator and the model is used directly:

https://github.com/somajs/somajs/blob/master/demos/todo-light/js/todos/views/views.js

Hope that helps.

Romu