Good way for templating

[gbtux]

Hi, First, thanks for the job. Really good. Starting with cordova very quickly (time to read the doc/issues ;) )

I read with attention the #145 issue and as @andreujuanc, i don't want to use Riot / Angula(arghhhh) but really like your components (light) approach with templates.

But now, i need to fetch datas through (private) REST API and don't know how to render it in a template. OK for phonon ajax method but after ? How can do that before page display (in template ) ? Can you share an example ?

Otherwise, this is a poor example of my cordova test application (index.js) :

phonon.options({
    navigator: {
        defaultPage: 'login',
        animatePages: true,
        enableBrowserBackButton: true,
        templateRootDirectory: './tpl'
    },
    i18n: null
});
var app = phonon.navigator();
app.on({page: 'pagetwo', preventClose: false, content: 'pagetwo.html'});

document.addEventListener('deviceready', function(){
    app.start();
}, false);

And index.html : <li><a href="#!pagetwo" class="padded-list">Page Two</a></li>

How can I split JS in multiple files. All in index.js is not maintainable for me ;)

Thanks in advance. BR

[andreujuanc]

Hello mate! Personally im trying to make phonon more modular and templatish. The idea is just having the page declarations, but the page-related stuff, all in the template.

For your small test, you have pagetwo.html where inside you can see the tags my web is here xD right? Well, in the same html, you can load scripts!

It worked for me loading them outside the tags, something like this:

<pagetwo>
    <h1>oh yes</h1>
</pagetwo>
<script>
       alert('loaded!!');
</script>

As you can see, now you have a "normal" html page. Which can be practically just tested without phonon.!

With the author we are discusing a way to make everything even easier, but as it is now, its TOTALLY workable and you should be able to do a full project with this. We are just trying to make it even more easy (who doesnt want more free time to just enjoy life right?)

BTW, what framework are you going to use to access data and bind values?

[andreujuanc]

Check this: https://github.com/andreujuanc/Phonon-Framework/tree/master/examples/pizza-app-with-ractive

Im working on a ractive example for phonon. But the template structure im trying to implement should work on any other ui framework/renderer/binder.

Note that i use the phonon.ajax to get data, then i just pass the data object to ractive, which in turn "refresh" the page.

[qathom]

Hi @gbtux,

Thank you for trying Phonon :). The example of @andreujuanc is perfect for your aim. In pagetwo.html, you can start tasks concerning this page. To complete the example of @andreujuanc :

<pagetwo>
    <h1>oh yes</h1>
</pagetwo>
<script>
       alert('loaded!!');

      function setList () {
            // by using a template engine
      }
      phonon.navigator().onPage('pagetwo').addEvent('create', function () {

             // show an indicator?

             // make your request
             phonon.ajax({
                 method: 'GET',
                 url: 'http://mysite.com/api/',
                 dataType: 'json',
                 success: function(res, xhr) {
                     console.log(res);
                     setList(res);
                 }
             });
      });
</script>

Phonon does not contain a template engine for building components such as lists because many small and interesting libraries exist like Mustache or Handlebars. Furthermore, many people use a complete MVVM framework such as Riot, Angular, Vue, etc so I don't think that Phonon needs to have its own template engine. But I am interested to read your point of view.

[gbtux]

Hi @Qathom,

Thanks to you and @andreujuanc for answers. My example with Handlebars (based on ractive) works perfectly !

I think other people may be interested with a quick example (but people really interested will found that issue ;) ).

I agree with you. Choice is better ! When i discover Phonon, i don't search a complete MVVM framework, or a complete MVVM framework with a really good architecture which can keep me a way to use what i want (a not only the complete stack). In comparison, i like (love) Symfony. Why ? Because it's a (really) big fullstack framework for big projects, but if i need, i can use just the Routing component or Doctrine,..., Twig or others.

I think it's the good way to keep Phonon "in the edge". Many features, simple, light, but in the real world (Angular do you hear me ?). People/Professional don't want to learn a new stack every week (and don't have this time in my world !). Keep it robust, supported, and Phonon has a long life.

So, I need to fix last issues in my Phonon project ;) ("NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node" when i go back on the defaultPage through my side-panel....an idea ? )

Thanks for all. PS : i can share my project if you're interested (Phonon + bower + grunt + handlebars in cordova) as a boilerplate....

[gbtux]

"NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node" --> phonon.js : 4417

[qathom]

Hi @gbtux,

Thank you for your contributions! :) The line 4417 refers to the dependency of side panels (Snap).. did you find a fix? If you have a "pizza sample" with Handlebars, you are welcome to make a pull request! The idea with samples is to achieve the same tiny app with different frameworks ;).

[syncai]

Hi @Qathom,

Could you expand on your example? I'm using mustache for tempting but I can't figure out how to integrate it into the page. I'd like to have the title and other sections of the page templated through mustache in an elegant way, can you suggest a way to do this?

Thanks

[gbtux]

Hi @syncai (french ?)

I use Handlebars in my Cordova project (more powerful than Mustache for me !) but it's the same for a web project. It's a small example based on my code and simplified of course. You have below an example on how render a list of shops (from an ajax request) in a div BR // gbtux

1° Include library in index.html <script type="text/javascript" src="js/handlebars-v4.0.5.js"></script>

2° in a page (for example pagetwo.html) :

<pagetwo data-page="true">

       <header class="header-bar">

             <div class="center padding-tp-6">

                   <img src="img/logo.png">

              </div>

       </header>

    <div class="content">

        <div class="padded-full" id="acontent">

        </div>

    </div>

       <script type="text/x-handlebars-template" id="aList">

        <ul class="list">

            {{#shops}}

                <li class="padded-list" data-id="{{id}}">{{field1}} ({{field2}})</li>

            {{/shops}}

        </ul>

    </script>

</pagetwo>

<script>

    phonon.navigator().onPage('pagetwo').addEvent('ready', function () {

                 template = Handlebars.compile($('#aList').html());

            phonon.ajax({

                method: 'POST',

                url: 'http://blabla.com',

                crossDomain: true,

                dataType: 'json',

                contentType: 'application/json',

                data: {

                    term: term

                },

                success: function(data){

                    var res = { shops : data };

                    $('#acontent').html(template(res));

                },

                error: function(res, flagError, xhr){
                                  phonon.alert('hum....something wrong');
                            }
                    });
         });

[syncai]

Thanks, that makes perfect sense.

On Thu, Oct 20, 2016 at 6:36 PM, guillaume notifications@github.com wrote:

Hi @syncai https://github.com/syncai (french ?)

I use Handlebars in my Cordova project (more powerful than Mustache for me !) but it's the same for a web project. It's a small example based on my code and simplified of course. You have below an example on how render a list of shops (from an ajax request) in a div BR // gbtux

1° Include library in index.html

2° in a page (for example pagetwo.html) :

`

```

```

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/quark-dev/Phonon-Framework/issues/149#issuecomment-255247329, or mute the thread https://github.com/notifications/unsubscribe-auth/APy1SSdL2iRRgLCP9Ew_iZ_Trho00RfNks5q1-zmgaJpZM4Jdyoz .

[syncai]

I'd like to revisit this question. I've gotten the templating to work, however, if I add a Phonon Component (like an accordion list) it is never recognized/bound by Phonon because it seems to look for components before the templating is applied. In your example, if you were creating an Accordion List, would it function properly? If not, is there a function similar to phonon.i18n().bind() that will trigger a re-indexing of any components on a page?