Backbone.js el error
Question
I'm currently learning backbone.js, still in the very beginning but I'm getting the error:
Uncaught TypeError: Cannot call method 'html' of undefined
on the line this.$el.html( template );
<body>
<div id="search_container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script type="text/template" id="search_template">
<label>Search</label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
<script type="text/javascript">
$(document).ready(function()
{
SearchView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
// Compile the template using underscore
var template = _.template( $("#search_template").html(), {});
// Load the compiled HTML into the Backbone "el"
this.$el.html( template );
}
});
var search_view = new SearchView({ el: $("#search_container") });
});
</script>
</body>
Why is this error occuring?
2 answers
solution1
1 2013-05-20 02:50:03
You are setting the el element of the view to
new SearchView({ el: $("#search_container") });
But nowhere in your html is the element already present. This the cause for the error, as defining el this way means that you have that element already present on the page and assigning the element as the container for the view.
Either add that element to the HTML or edit it like below
new SearchView();
so that the el will fall back to a div by default.
solution2
-1 2013-05-20 00:18:58
When you reference a DOM element in your javascript code, that element have to be already available — the JS code should be run after this element's creation. Here, #search_container div that you assing to the view's el field is created after the script execution. To avoid such problems, use jQuery's ready method:
$(document).ready(function()
{
SearchView = Backbone.View.extend({
// ...
});
// ...
});
This method runs the function passed as the argument after HTML document is created and all elements are ready to use.
Also, the version of backbone that you're using seems not to automatically manage the value of $el property. If you need to use this version update the initialize method like this:
initialize: function()
{
this.$el = $(this.el);
this.render();
},
This will manually set $el to the desired value.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.