javascript - Rendering of the html page not working -

javascript - Rendering of the html page not working -

i using backbonejs framework. under framework, have created app.js uses backbonejs, requirejs, underscore , text.js load html page onto div. console shows html page loaded not able see particular page on screen.

below app.js

class="lang-js prettyprint-override">define(function (require) { // "use strict"; var $ = require('jquery'), underscore = require('assets/js/underscore'), backbone = require('assets/js/backbone'), tpl = require('text!views/home.html'), template = _.template(tpl); homecoming backbone.view.extend({ render: function () { el: '#banner', this.$el.html(template()); homecoming this; } }); });

i load home.html main screen(index.html). have called app.js in index.html. console shows next xhr finished loading: "file:///d:/project1/views/home.html" index.html page doesn't show home.html

there number of issues code.

backbone view needs instantiated el needs defined outside render function render function needs called, either manually or within initialize function (which invokes on creating instance of view) overall construction not well-written not correcting out of scope of question.

check fiddle: http://jsfiddle.net/rahulsv/c4dveax9/

var tpl = "<div>hello world</div>"; var template = _.template(tpl); (function(){ var view = backbone.view.extend({ el: '#banner', initialize: function(){ this.render(); }, render: function () { this.$el.html(template()); } }); var v = new view(); })();

hope helps.

update:

to access template file using requirejs (since using it) can follows:

template file:

<!-- pod.html --> <h2><%= title %></h2> <p><%= body %></p>

accessing template js:

// view.js define(["text!templates/pod.html"], function(pod) { var view = backbone.view.extend({ template: _.template(pod) }); });

check link reference: http://kilon.org/blog/2012/11/3-tips-for-writing-better-backbone-views/

javascript html backbone.js requirejs underscore.js