gistfile1.txt

Re-usable separated templates via backend, frontend, lang files, with heirarchy.


views
 └ comments
   └ single.twig
 └ video
   └ player.twig
 └ templates.twig
   

views/comments/single.twig ----------

<div class="comment-single">
    <h3>{{ model.author.getName() }}</h3>
    <time>{{ model.getCreatedAt() }}</time>
    <p>{{ model.getMessage() }}</p>
</div>


views/video/player.twig ----------

<div class="video-wrapper">
    <embed src="{{ model.getSource("primary") }}">
</div>


view/templates.php --------------- (or <template> tags)

<script type="text/template" id="tpl-comments-single">
    {% includeraw "comments/single.twig" %}
</script>
<script type="text/template" id="tpl-video-player">
    {% includeraw "video/player.twig" %}
</script>



---------------------------------------------------


script/app/page/video.js -------------------

;(function(namespace) {
    'use strict';

    var Events = namespace.Events,
        Flags  = namespace.Flags,
        State  = namespace.State;

    namespace.Page_Video = namespace.Page_Base.extend({

        name: "Page_Video",

        // <Model>
        model: null,

        // <String> Name of script tag containing our template
        templateName: "tpl-video-page",
        

        // Public Method
        // ---------------------------------------------------------------

        initialize: function(options) {
            options || (options = {});

            // super
            namespace.Page_Base.prototype.initialize.call(this, options);

            // views
            this.views.add(new namespace.View_Video_Player({
                model: this.model
            });
            
            this.views.add(new namespace.View_Comments({
                model: this.model
            });
        },
        
        render: function() {
            this.views.render();
        }
        
    });
    
})(window.mynamespace || {});



script/app/view/video/player.js -------------------

;(function(namespace) {
    'use strict';

    var Events = namespace.Events,
        Flags  = namespace.Flags,
        State  = namespace.State;

    namespace.View_Video_Player = namespace.View_Base.extend({

        name: "View_Video_Player",

        // <Model>
        model: null,

        // <String> Name of script tag containing our template
        templateName: "tpl-video-player",
        

        // Public Method
        // ---------------------------------------------------------------

        initialize: function(options) {
            options || (options = {});

            // super
            namespace.View_Base.prototype.initialize.call(this, options);
            
            // etc etc
        },
        
        render: function() {
            this.template.render(this.$el, {
                model: this.model
            });
        }
        
    });
    
})(window.mynamespace || {});