Estoy tratando de utilizar el método de agregar a través de el en la vista BackBoneJS. Estoy usando manubrios.
Cuando ejecuto mi código, obtengo esto en la consola:
main.js:14 Uncaught TypeError: Cannot read properties of undefined (reading 'html') at d.render (main.js:14:14) at main.js:23:43
Aquí también están los registros de la consola y las respuestas a lo siguiente:
videoViewer.el <div></div> videoViewer.$el undefined
Aquí está mi 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);
¿Alguien puede entender por qué mi $el parece no existir?
Resulta que tuve algunos otros problemas que eran más fundamentales. No había instalado el guión bajo (supuse falsamente que era parte del paquete BackBone).
También tuve las dependencias vinculadas incorrectamente en <head>
.
Necesitaba verse así:
<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>