Simple script. Can't make it work.

54 views
Skip to first unread message

Luis Gonzalez

unread,
May 11, 2012, 8:35:59 AM5/11/12
to agil...@googlegroups.com
Hello there,

I just started playing with Agility and I like it a lot.
However, I am having problems with simple scripts adapted from the getting started samples, and I can't figure out why they don't work.
This is a simple example:

---script starts here----

<script src="agility.min.js"></script>
<script>



var dude = $$({name:'Luis'}, $("#show").html(),'span {color:white; background:orange; padding: 5px; }',
{
'click #do': function(){
this.model.set({name:'Ramona'});
},

'change': function(){
alert('model changed');
}
}
);


$$.document.append(dude);


</script>

<script id="show" type="text/html">
   <span data-bind="name"></span>
   <button id="do">change name</button>
</script>

---script ends here----


I tried many variations of this script (for example, defining the view inline within the object) but never works.
This script is very similar to those samples shown in the website, and it is very simple, but someting is wrong...

One curiosity: If I change the first handler to 'create' instead of 'click #do', it works.
But making it react to a user action, it doesn't work... why?

gsb

unread,
May 11, 2012, 1:48:43 PM5/11/12
to Agility.js
@Luis Gonzalez

Hi. I am a newbe also but will take a shot at your issues.
As I see it you have two main problems:
1) Timing - you start manipulating the DOM before it is ready, and
2) Your template HTML does not have a single defining tag.

I re-did your code as follows including a wait for DOM ready
conditions (see jQuery documentation) and a namespace 'app' creating a
closure module for the code. Also, I suggest Agility's verbose
format; atleast initially. It provides better readability while you
"get the hang of it."


Code:
----------------------
<!doctype html>

<html lang="en" >

<head>

<meta charset='utf-8' />

<title>Agility Test</title>

</head>

<body>

<!-- HTML template for 'view' -->
<script id="show" type="text/html">
<div>
<span data-bind="name"></span>
<button id="do" >change name</button>
</div>
</script>

<!-- Application dependent libs. -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="agility.js"></script>

<!-- Application 'code' module(s). -->
<script>
/*
* jQuery's on DOM ready methods definition - '$(function()
{…});'
* Here, it is proxied to bind our application's namespace,
'app'
*/

$( $.proxy(function ()
{
console.log("DOM is ready for modifications now.");

/*
* 'app' is a namespace for all agility objects and
miscellanea
* required for our application. Example:
*
* $( $.proxy( function () {
* . . . this === 'app' which is our application's
namespace.
* }, (window['app']||(window['app']={})) ));
*
* Now first, localize our namespace as a 'closure' variable
shortcut
* to: window['app'] i.e. window.app.
*/
var app = this;

this.dude = $$(
{
model : {
name: 'Luis'
},

view : {
format: $("#show").html(),
style : 'span { color:white; background:orange; padding:
5px; }'
},

controller : {
'click button': function() {
this.model.set({name:'Ramona'});
},
'change': function() {
alert('model changed');
}
}
});

$$.document.append(this.dude);

}, (window['app']||(window['app']={})) ));

/* End of DOM ready, namespaced, module closure. */
</script>

</body>
</html>
----------------------

Greg

gsb

unread,
May 11, 2012, 2:05:01 PM5/11/12
to Agility.js
@Luis Gonzalez

Hummm!
Be careful of the 'line-wraps' in the example code; sorry.

And I overstated the timing issue. The way the you set-up, your
script placement should negate that issue. So my code is an 'explicit
overkill' for using jQuery's DOM ready methodology. However, think
about code reusability and 'explicit coding' becomes more reliant.

Greg

Luis Gonzalez

unread,
May 11, 2012, 3:31:30 PM5/11/12
to agil...@googlegroups.com
Hey Greg,

Thanks for your tips!
Your code works, but I found something strange:

If I define the view format inline ( format: '<span data-bind="name"></span><button id="btn">change name</button>' ), it stops working.

By the way, I absolutely agree with you about using the verbose syntax, at least while I'm getting the hang of it.
Actually, my original code was verbose (and in Coffeescript) but I made so many changes that it finally stayed as I posted it.

One curiosity: While searching for a solution to this problem, I came across a post in Stack Overflow (posted by somebody else a few hours earlier) having exactly the same problem.

So there were two guys in this planet having exactly the same issue, at the same time, in different places...




Tom Lackner

unread,
May 11, 2012, 3:39:10 PM5/11/12
to agil...@googlegroups.com
Formats (templates) must be enclosed by a single tag - try wrapping it
in a <div>..</div>
--
Thomas Lackner * 305-978-8525

gsb

unread,
May 11, 2012, 6:07:54 PM5/11/12
to Agility.js
@Luis Gonzalez

Yes as Tom Lackner said above, the HTML fragment MUST have a single
parent/origin node as I showed in the example template. See:
<span data-bind="name"></span>
<button id="btn">change name</button>
has two separate fragments; a span fragment and a button fragment.

A simple solution is to wrap both fragments in a div as:
<div>
<span data-bind="name"></span>
<button id="btn">change name</button>
</div>
which becomes one 'div' fragment.

In the 'spirit' of Agility, in-object HTHL code fragments are
preferred, instead of templating. The goal being, all related view
HTML, styling and control scripting is maintained in a single object.
This aids in view element objects maintenance and reusability.

Now coffee script. Argh! I do not think my brain is ready for yet
another language; yet another abstraction from the problem to be
solved. For now I'll stick to javascript.

Greg




On May 11, 3:39 pm, Tom Lackner <lack...@gmail.com> wrote:
> Formats (templates) must be enclosed by a single tag - try wrapping it
> in a <div>..</div>
>
>
>
>
>
>
>
>
>
> On Fri, May 11, 2012 at 3:31 PM, Luis Gonzalez <luis...@gmail.com> wrote:
> > Hey Greg,
>
> > Thanks for your tips!
> > Your code works, but I found something strange:
>
> > If I define the view format inline ( format: '<span
> > data-bind="name"></span><button id="btn">change name</button>' ), it stops
> > working.
>
> > By the way, I absolutely agree with you about using the verbose syntax, at
> > least while I'm getting the hang of it.
> > Actually, my original code was verbose (and in Coffeescript) but I made so
> > many changes that it finally stayed as I posted it.
>
> > One curiosity: While searching for a solution to this problem, I came across
> > a post in Stack Overflow (posted by somebody else a few hours earlier)
> > having exactly the same problem.
> > The post is
> > here: http://stackoverflow.com/questions/10537074/cant-get-simple-agility-j...

Luis Gonzalez

unread,
May 11, 2012, 7:21:51 PM5/11/12
to agil...@googlegroups.com
Thank you Greg and Thomas!

Luis M. Gonzalez

unread,
May 11, 2012, 7:36:31 PM5/11/12
to agil...@googlegroups.com
@Greg,

Coffeescript is godsend to me, because I cut my teeth with Python, which shares the same philosofy and features.
That's why this language appeals mainly to those coming from Python and Ruby.
However, if you ever have time to check it out, you may like it. CS requires typically many fewer lines of code to get the same results, and it looks more readable and mantainable.

For example, the code above should look this way in CoffeeScript:

dude = $$
    model :
        name: 'Luis'
     
    view : 
        format: '<div><span data-bind="name"/><button id="btn">change name</button></div>', 
        style : 'span { color:white; background:orange; padding:5px; }'   
       
    controller : 
         'click button': -> 
              this.model.set {name:'Ramona'}       
          'change': -> 
              alert 'model changed' 
        
    $$.document.append dude

Isn't it beautiful..?

Luis
Reply all
Reply to author
Forward
0 new messages