web2py and Ember.js starterkit

Hello; here is my attempt to integrate emberjs into web2py.

I am doing this both as an experiment and to learn about the two frameworks (javascript frontend/python backend).

I am doing this with the following:

* web2py from source: web2py_src-2.4.7.zip (http://www.web2py.com/examples/static/web2py_src.zip)

* emberjs starter kit: starter-kit-1.0.0-rc.4.zip (https://github.com/emberjs/starter-kit/archive/v1.0.0-rc.4.zip)

Here are steps to setup what I got so far:

* Unzip and run 'python web2py.py', go to site management

* Create a web2py app with 'New simple application', called 'embertest'

* Unzip the contents of starter-kit-1.0.0-rc.4.zip and copy the following files:

starter-kit-1.0.0-rc.4/js/libs/ember-1.0.0-rc.4.js -> applications/embertest/static/js/libs/ember-1.0.0-rc.4.js

starter-kit-1.0.0-rc.4/js/libs/handlebars-1.0.0-rc.4.js -> applications/embertest/static/js/libs/handlebars-1.0.0-rc.4.js

starter-kit-1.0.0-rc.4/js/libs/jquery-1.9.1.js -> applications/embertest/static/js/libs/jquery-1.9.1.js

starter-kit-1.0.0-rc.4/js/app.js -> applications/embertest/static/js/app.js

I modified the applications/embertest/static/js/app.js and simply add the rootElement:

App = Ember.Application.create({

rootElement: $('#ember')

});

App.Router.map(function() {

// put your routes here

});

App.IndexRoute = Ember.Route.extend({

model: function() {

return ['red', 'yellow', 'blue'];

}

});

I edit applications/embertest/models/db.py and add the following HTML helper HB() ('HB' for Handlebars; this is a temporary location for development, will be making a module for this eventually. See also https://groups.google.com/d/topic/web2py/-CrviALMVy8/discussion ):

# added to applicatons/embertest/models/db.py

class HB(DIV):

tag = ''

def xml(self):

return '{{%s}}' % super(HB, self).xml()

I edit the applications/embertest/views/default/index.html and change it to the following:

{{left_sidebar_enabled,right_sidebar_enabled=False,('message' in globals())}}

{{extend 'layout.html'}}

{{=DIV(_id='ember')}}

<script type="text/x-handlebars">

<h2>Welcome to Ember.js</h2>

{{=HB('outlet')}}

</script>

<script type="text/x-handlebars" data-template-name="index">

<ul>

{{=HB('#each item in model')}}

<li>{{=HB('item')}}</li>

{{=HB('/each')}}

</ul>

</script>

<script src="{{=URL('static','js/libs/jquery-1.9.1.js')}}"></script>

<script src="{{=URL('static','js/libs/handlebars-1.0.0-rc.4.js')}}"></script>

<script src="{{=URL('static','js/libs/ember-1.0.0-rc.4.js')}}"></script>

<script src="{{=URL('static','js/app.js')}}"></script>

{{=BEAUTIFY(response._vars)}}

{{block right_sidebar}}

{{=A(T("Administrative Interface"), _href=URL('admin','default','index'), _class='btn',

_style='margin-top: 1em;')}}

<h6>{{=T("Don't know what to do?")}}</h6>

<ul>

<li>{{=A(T("Online examples"), _href=URL('examples','default','index'))}}</li>

<li><a href="http://web2py.com">web2py.com</a></li>

<li><a href="http://web2py.com/book">{{=T('Documentation')}}</a></li>

</ul>

{{end}}

Now, when I display the page, the 'Welcome to Ember.js' and other ember messages is after the DIV id='ember'!

Please let me know if you find this to be useful.

Thank you for your time;

-Rob Powell

PS:

I am aware of specifing to use different delimiters in the view in web2py, but is there an optional way to escape the '{{'/'}}' characters in the view? Something like the following?

<h2>Welcome to Ember.js</h2>

\{{outlet\}}

</script>

Comments (0)