I'm trying to utilize the append method through the el in the BackBoneJS view. I'm using Handlebars.
When I run my code, I get this in the console:
main.js:14 Uncaught TypeError: Cannot read properties of undefined (reading 'html')
at d.render (main.js:14:14)
at main.js:23:43
Here also are the console logs and responses to the following:
videoViewer.el
<div></div>
videoViewer.$el
undefined
Here is my JavaScript:
const VideoViewerModel = Backbone.Model.extend({
defaults: {
video: '',
title: '',
description: ''
}
})
const VideoViewerViewer = Backbone.View.extend({
template: Handlebars.compile($('#video-view-template').html()),
render: function () {
this.$el.html(this.template(this.model.attributes))
},
});
const videoModel = new VideoViewerModel();
const videoViewer = new VideoViewerViewer({ model: videoModel });
$('.viewer-container').append(videoViewer.render().el);
Can anyone catch why my $el seems non-existent?
It turns out that I had some other problems that were more fundamental. I hadn't installed underscore (I falsely assumed that it was part of the BackBone package).
I also had the dependencies improperly linked in the <head>.
It needed to look like this:
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Backbone YouTube</title>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/underscore/underscore-min.js"></script>
<script src="node_modules/backbone/backbone-min.js"></script>
<script
type="text/javascript"
src="./node_modules/handlebars/dist/handlebars.min.js"
></script>
</head>