SpineJS Beginnner question

119 views
Skip to first unread message

Sebastian Zahn

unread,
Nov 28, 2011, 7:26:38 AM11/28/11
to spi...@googlegroups.com
Hey there,

I just started using spine for our products. Therefore I exported the Contacts app, opened up my own Project and tried to build up my own App by randomly looking at how things are done in the Contacts app.

What I just don't understand is - when do I use @html, when @append or @el or whatsoever.
What I would like to see is a simple description that tells me how to connect my controller to the app, how to define the corresponding view to controllers etc.
It would be fantastic to get a little more guidance on "how things interact together" to be a lot quicker on getting into it..

One more question. The index.coffee at the sample app says "@append @contacts.active()" but that action function is neither defined in contacts.coffee nor found in the API-Doc for Controller. What does it do? How ...? :D

I would appreciate getting a little help to accelerate me and my learning curve :D.. Any Input is appreciated.
In return I'll post everything I learned back to the community in our devblog

Daniel Holmes

unread,
Nov 28, 2011, 7:58:34 AM11/28/11
to spi...@googlegroups.com

Hi Sebastian,

The examples that are provided online are using an outdated version of spine (except the todo example). So that would be why you will find some undocumented features. If you check the changelog (i think its on the spine git hub) you should find what happened to the function.

Im a bit of a beginner myself so if no one answers tonight, i might research and help you out tomorrow.

- Dan

Sebastian Zahn

unread,
Nov 28, 2011, 9:26:53 AM11/28/11
to spi...@googlegroups.com
Fantastic, thanks!

Hernán Schmidt

unread,
Nov 28, 2011, 5:08:01 PM11/28/11
to spi...@googlegroups.com
Also beginner, but I'll explain what I can:

@el - refers to the HTML element that's associated to a particular controller

@append "stuff" - adds "stuff" to the end of the HTML element of this controller (@el)
Before:
<div>Hello</div>
Run @append "stuff"
After
<div>Hellostuff</div>

@html "stuff" - replaces the contents of @el with "stuff"
Before:
<div>Hello</div>
Run @html "stuff"
After
<div>stuff</div>

About your second question and active(), this method is defined in Manager.
A Manager contains many controllers, and activates/deactivates them.
When a controller is activated, the class "active" is added to its @el, and the class is removed from the controller that had it before.
This way, you can hide all controllers that don't have the class "active", and only show the one that does.
More info: http://spinejs.com/docs/manager

Sebastian Zahn

unread,
Nov 29, 2011, 10:54:29 AM11/29/11
to Spine
Thanks for the information.
What I'm finally struggeling with is the part how the whole app
becomes alive..

Can any of you post their index.coffee file here please? Looking at
the demoapp show's me that @append is being called in the constructor
to append the templatedata from the Contacts instance to the
dom..trying to call @append in my app generates the error "this.append
is not a function"

I just want to get going and keep staying in setting up
everything... :/

yeellpp! :)

On 28 Nov., 23:08, Hernán Schmidt <hernan.schm...@gmail.com> wrote:
> Also beginner, but I'll explain what I can:
>
> @el - refers to the HTML element that's associated to a particular
> controller
>
> @append "stuff" - adds "stuff" to the end of the HTML element of this
> controller (@el)

> *Before:
> *<div>Hello</div>
> *Run @append "stuff"*
> *After*


> <div>Hellostuff</div>
>
> @html "stuff" - replaces the contents of @el with "stuff"

> *Before:
> *<div>Hello</div>
> *Run @html "stuff"*
> *After*

Reply all
Reply to author
Forward
0 new messages