Ractive example

[Richard]

Hi,

I have difficulties starting with ractive.js. Does anybody has a working example app with local ractive sources?

Issues I have/had:

- I have tackled the deliniter issue by using {% %} as web2py delimiter, hopefully

- Is <script src="{%=URL('static', 'js/ractive.js')%}"></script> sufficient or is the tree under ractive also needed because of the imports in ractive.js?

Thank you,

Richard D

[Leonel Câmara]

That should work perfectly fine. This is how I do it, if you would like another example.

I have this in my layout.html before  {{include 'web2py_ajax.html'}}

}}

  ractive_enabled = globals().get('ractive_enabled',False)

  if ractive_enabled:

    response.files.append(URL('static','js/ractive.js'))

    response.files.append(URL('static','js/ractive-events-tap.js'))

    response.files.append(URL('static','js/ractive-transitions-fade.js'))    

  pass

}}

Then on my views using ractive, I have ractive_enabled=True and I change ractive delimiters. Example:

<script>

var ractive = new Ractive({

    el: '#main',

    template: '#main-template',

    delimiters: [ '[[', ']]' ],

    tripleDelimiters: [ '[[[', ']]]' ] ,

});

</script>

I prefer changing ractive's delimiters, Massimo, for instance, prefers your approach.

[Richard]

Leonel, 

Adding this to the layout.html and index.html I get the following error:

missing "pass" in view

Version

web2py™	Version 2.9.11-stable+timestamp.2014.09.15.23.35.11
Python	Python 2.7.8: c:\python27\python.exe (prefix: c:\python27)

Traceback

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

Traceback (most recent call last): File "c:\web2py\gluon\rocket.py", line 1337, in run self.run_app(conn) File "c:\web2py\gluon\rocket.py", line 1830, in run_app self.environ = environ = self.build_environ(sock_file, conn) File "c:\web2py\gluon\rocket.py", line 1650, in build_environ request = self.read_request_line(sock_file) File "c:\web2py\gluon\rocket.py", line 1401, in read_request_line raise SocketTimeout('Socket timed out before request.') SocketTimeout: Socket timed out before request.

Also some variants give this error.

[Leonel Câmara]

You should only add to layout.html

index.html should be

{{ractive_enabled=True}}

{{extend 'layout.html'}}

I'm guessing the missing pass is a copy paste error because the pass is there.

[Richard Vézina]

Thank you Leonel...

I don't know why setting ractive_enabled = True from the controller with global not works though...

Richard

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Leonel Câmara]

Well globals in Python are really only global to their own module, web2py templates and controllers are not exactly python modules anyway, so, it's complicated; just do it in the view and let the template system take care of it.

[Richard Vézina]

That why... I was strugling with issue with global since a lot of time that clarify thing now...

Richard

On Wed, Oct 29, 2014 at 3:37 PM, Leonel Câmara <leonel...@gmail.com> wrote:

Well globals in Python are really only global to their own module, web2py templates and controllers are not exactly python modules anyway, so, it's complicated; just do it in the view and let the template system take care of it.

--

[Richard Vézina]

Thanks a lot!

Richard

[Richard D]

Richard D again ;)

pass missing was my error cleaning up index.html only half.

Having added the 3 js file to application I get the error in the js console when reactive.js is run:

Uncaught SyntaxError: Unexpected reserved word 

More specific: on the first line when importing defaults....:

import defaults from 'config/defaults/options';

import easing from 'config/defaults/easing';

import interpolators from 'config/defaults/interpolators';

index.html is now:

{{ractive_enabled=True}}

{{extend 'layout.html'}}

<div id='main'></div>

<script id='main-template' type='text/ractive'>

    <p>Hello, [[name]]!</p>

</script>

<script>

var ractive = new Ractive({

    el: '#main',

    template: '#main-template',

    delimiters: [ '[[', ']]' ],

    tripleDelimiters: [ '[[[', ']]]' ] ,

});

</script>

Thank for your patience

Richard D

[Richard Vézina]

Richard,

The import of Leonel seems not to work out of the box... These file are not part of Ractive.js.zip :

ractive-events-tap.js

ractive-transitions-fade.js

response.files.append(URL('static','js/ractive-events-tap.js'))

    response.files.append(URL('static','js/ractive-transitions-fade.js'))   

Try comment the line above

Does it remove the error you have?

Richard

--

[Richard D]

With and without these plugins the error occurs. I downloaded them seperately, after the error to solve nice errors are given that first reactive must be loaded before these plugins are loaded, nice coded!

btw I just started with the welcome app, no other specific code could cause the error.

[Richard Vézina]

Web2py complains about reserved word that you may use in your model...

Could you show your model?

Richarc

[Richard D]

It is the default welcome model. 

even : 

db = DAL('sqlite://storage.sqlite',pool_size=1) #,check_reserved=['all'])

 

with the check_reserved parameter commented, give the same error 

[Leonel Câmara]

I'm so confused with the 2 Richards eheheh.

Yes, those were plugins I'm sorry, I should have said something, I thought it would be nice to include them in the example.

{{ractive_enabled=True}}
{{extend 'layout.html'}}


<div id='main'></div>


<script id='main-template' type='text/ractive'>
    <p>Hello, [[name]]!</p>
</script>


<script>
var ractive = new Ractive({
    el: '#main',
    template: '#main-template',
    delimiters: [ '[[', ']]' ],
    tripleDelimiters: [ '[[[', ']]]' ] ,
});
</script>

This is problematic because the default layout.html already has a main with id="main".

You need to remove all that and change layout.html main to something like this:

    {{if ractive_enabled:}}

    <script id="main-template" type='text/ractive'>

    {{else:}}
      <main id="main" class="main row" role="main">
    {{pass}}


        {{if left_sidebar_enabled:}}
        <div class="col-lg-3 col-md-3 left-sidebar sidebar">
            {{block left_sidebar}}
            <h3>Left Sidebar</h3>
            <p></p>
            {{end}}
        </div>
        {{pass}}


        <div class="{{=middle_columns}}">
            {{block center}}
            {{include}}
            {{end}}
        </div>


        {{if right_sidebar_enabled:}}
        <div class="col-lg-3 col-md-3 right-sidebar sidebar">
            {{block right_sidebar}}
            <h3>Right Sidebar</h3>
            <p></p>
            {{end}}
        </div>
        {{pass}}


    {{if ractive_enabled:}}
      </script>
      <main id="main" class="main row" role="main">
    {{pass}}
    </main><!--/main-->  

Then in the view extending layout.html you would only need the script part as the main template would already be there.

That said. This is only one way to do it, that would preserve the layout, it's good if you only want to use ractive for parts of your application, it's not much use if you're making a SPA, in which case you're better off just making a clean layout.html.

[Richard D]

Leonel, Richard,

Thank you for your support :)

The big disturbing factor for me was the wrong Ractive.js  I took the first I saw, but that is the development code starting with the imports etc Dive into the release and take ractive.js there.

Richard Dijkstra

p.s. Trying to use Richard D for not confusing others ;)

[Tim Richardson]

I am really curious to see a web2py app deploying ractive.js, to get a feel for how an experienced user gets value from ractive on top of web2py's helpers.

Kind of best practice beyond changing the delimiters. 

For example, do you take a hybrid approach to mark up/add to what web2py does via standard views, or just send get web2py to do endpoints sending and receiving json? 

Possibly an interesting slice for web2py. 

[Massimo Di Pierro]

Please look into this: https://github.com/mdipierro/w3

I could very much use your opinions. I am working on it actively these days.

[JorgeH]

Impressive , Massimo!

On a quick view, you seem to have wrapped up ractive.js into web2py.

What does W3 stand for?

[Massimo Di Pierro]

W3 stands for my lack of creativity in coming up with good names. ;-)

Eventually it will be renamed.

It is not finished but at a very good stage. The nice part if the fact that the view uses a combination of web2py template {% ... %} and ractive {{ ... }}, form styles are defined clients-side, and python objects mirror the JS objects in ractive. The template and the controller talk via exchange of json. You can program both sides without very little need for JS programming.

TODO: 

- implement update forms and CSRF protection (tomorrow)

- implement the equivalent of SQLFORM.grid

- rewrite Auth to use the new Form object

- documentation - documentation - documentation

Looking for help.

Massimo

[Tim Richardson]

this seems like a true path to the future for web2py and I will help, after I understand what you are doing ...

[Richard Vézina]

Would help too!

[Massimo Di Pierro]

I think for starters trying integrate a different layout and writing instructions about how to do that would help a lot.

Would help too!

To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscribe@googlegroups.com.

[Michele Comitini]

@Massimo

please launch a name context ASAP else we get stuck with that name!!! ;-)

To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.

[António Ramos]

+1

[Ron Chatterjee]

As part of the documentation, can you please post a video and screenshots with all the new changes? Sorry. 

[Tim Richardson]

On Tuesday, 24 March 2015 13:55:25 UTC+11, Massimo Di Pierro wrote:

Please look into this: https://github.com/mdipierro/w3

I could very much use your opinions. I am working on it actively these days.

Massimo,

the w3 'project': it seems to be orthogonal to bootstrap3 support, so in other words any widget changes won't have anything to do with ractive support?

I'm a bit confused about the ambition for the use of ractive.

tim

[Massimo Di Pierro]

yes it is orthogonal. In fact it uses very little of web2py, almost exclusively the DAL and marginally the web2py template language. 

[Tim Richardson]

so it needs new widgets ("helpers" but they will be client side now?)

[Richard]

Hello Massimo,

I am looking at w3 right now... I have been able to make it works... I would like to know how your plan to integrate this into web2py... What it needs to be consider relatively stable for user to use it... Does your experiment is sufficiently well thought, it could be generalize and include in web2py core? Or could we start working on this bleeding edge concept to get away from server side form?

I am want to help as much as I can in the coming days to make this in web2py core somehow soon...

I will look to let someone use semantic ui as you point where we can help...

Thanks

Richard

[Richard]

If I understand to style and create a semantic ui form style I would have to create new layout and form template?

forms.bs3.html -> forms.semntaic-ui.html

?

Richard

[Richard Vézina]

Hello Massimo,

Are you really consider leaving authentication filtering of page elements to ractive ({{#if (auth && auth.user)}} ...)?

Richard

--

[Massimo Di Pierro]

yes.

[Massimo Di Pierro]

No. That simply decides wheher to display the login menu. 

To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscribe@googlegroups.com.

[Richard Vézina]

Where are we going?

I also didn't had any answer here : https://groups.google.com/d/msg/web2py-developers/x23GReU0McM/5kX42ft-PAAJ

Thanks

Richard

To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.