All geek questions in one place

An underline pattern that does not display in the trunk

I tried a simple example (see the full code below) with the latest derived versions of backbone.js, underscore.js and jquery. However, I cannot display anything on the screen. I tried to record this. $ El is for the console log, and it seems that indeed html var also contains the correct parsed HTML from the test pattern. But nothing is displayed in the browser window.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>testing Backbone.js</title> </head> <body> <script type="text/template" id="test-template"> <div id="container"> <%= test %> </div> </script> <script type="text/javascript" src="js/lib/jquery.js"></script> <script type="text/javascript" src="js/lib/underscore.js"></script> <script type="text/javascript" src="js/lib/backbone.js"></script> <script type="text/javascript"> var testView = Backbone.View.extend({ el: $("#container"), template: _.template($('#test-template').html()), render: function() { var html = this.template({test: 'hello World!'}); this.$el.html(html); return this; } }); $(document).ready(function() { var test = new testView(); test.render(); }); </script> </body> </html>
+4
source share
2 answers

There is no element with id = "container" to add a template. If you replace

 el: $("#container")

with

 el: $('body')

Something should appear

+5
source

No rendering code. The contents of the template are not the visible part of the DOM; try the following:

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>testing Backbone.js</title> </head> <body> <div id="output"></div> <script type="text/template" id="test-template"> <div id="container"> <%= test %> </div> </script> <script type="text/javascript" src="js/lib/jquery.js"></script> <script type="text/javascript" src="js/lib/underscore.js"></script> <script type="text/javascript" src="js/lib/backbone.js"></script> <script type="text/javascript"> var testView = Backbone.View.extend({ el: $("#container"), template: _.template($('#test-template').html()), render: function() { var html = this.template({test: 'hello World!'}); $("#output").html(html); return this; } }); $(document).ready(function() { var test = new testView(); test.render(); }); </script>

+1
source

Source: https://habr.com/ru/post/1490436/

More articles:


All Articles