how to show html contend in backbone.js

Question

I am trying to load html file in backbone.js .but i am not able display view .could please tell where i did wrong ..i will share my code with u. **code**: http://goo.gl/CcqYwX

 $(document).ready(function(){
    var ContactManager = new Marionette.Application();
    ContactManager.addRegions({
        mainRegion:"#contend"
    })

    ContactManager.on("start", function(){
        console.log("ContactManager has started!");


    });

    ContactManager.start();

 // router 
     var routers =  Backbone.Router.extend({
    routes: {
        "": "showFirstPage"
    },
    showFirstPage:function(){

    }
    })

     var ToolItemView = Backbone.Marionette.ItemView.extend({

        template: 'template/test.html',



    });
 var toolItemview = new ToolItemView(); 
 ContactManager.mainRegion.show(toolItemview); 

})

i am trying to load test.html file but i am not able to do that..?

score 1 · Answer 1 · answered Jan 20 '15 at 04:54

1

Marionette uses underscore templating by default. You'll need to either use some sort of external loader to load them in as variables, or you can place them in the DOM as script elements that you can then reference with your template property. See here:

So for instance if you put it in your html, the code would look like

<html>
<body>
<script type="text/template" id="example">
<div class="template-content-here">
<%=variable_here %>
<!-- probably more stuff here -->
</div>
</script>

<script src="myApp.js"></script>
</body>
</html>

then you could reference it in JavaScript as

var ToolItemView = Backbone.Marionette.ItemView.extend({

    template: '#example',

 });

That works nicely for small projects, for larger projects you'll want some sort of build/module system to pull in the precompiled templates and reference those directly.

Way more info here: http://marionettejs.com/docs/v2.3.1/marionette.renderer.html

answered Jan 20 '15 at 04:54

Ben McCormick

25,260
12
52
71

I need to big project could you please tell me the build/module system .? Actually just give some change in my code so that I will do after that – user944513 Jan 20 '15 at 04:57
Using a build/module system is more like a books worth of content than a StackOverflow answer. I'd recommend starting with scripts in your code and getting basic stuff working first before you start worrying about that. If you want to investigate, I'd recommend looking into http://browserify.org/, but again, I'd focus on understanding Backbone and Marionette before you try and boil the ocean and learn everything at once. – Ben McCormick Jan 20 '15 at 05:04
@sir ..you are right ..But I am learning tutorial But my simplely want how I will load template .? (which is directory ?).could you please tell me template manager – user944513 Jan 20 '15 at 05:08
There's not a simple single answer for that. If you have a template in an external file, you could load it a variety of ways, each of which have tradeoffs. This has been discussed on SO before, here's one question: http://stackoverflow.com/questions/8366733/external-template-in-underscore – Ben McCormick Jan 20 '15 at 05:10
@ok sir I will try my own – user944513 Jan 20 '15 at 05:12

how to show html contend in backbone.js

1 Answers1