Backbone Afficher dans un module Browserify - Ne fonctionne pas

J'essaie de créer une application Backbone.js fonctionnelle en séparant les déclarations View et Model en modules (Browserify). Mon code:Backbone Afficher dans un module Browserify - Ne fonctionne pas

index.html

<head> 
    <script src="bundle.js"></script> 
</head> 

<body> 
    <div id="myDiv">Loading...</div> 
</body> 

<script type="text/template" id="myTemplate"> 
    Test Content 
</script>

Model.js

var Backbone = require('backbone') 
Backbone.$ = $ 

Model = Backbone.Model.extend({ 

}); 

module.exports = Model;

View.js

var _ = require('underscore') 
var $ = require('jquery') 
var Backbone = require('backbone') 
Backbone.$ = $ 

View = Backbone.View.extend({ 
    el: '#myDiv', 
    template: _.template($('#myTemplate').html()), 
    initialize: function(){this.el.append(this.$el.html(this.template()));}, 
}); 

module.exports = View;

main.js

var _ = require("underscore"); 
var Backbone = require("backbone"); 
var $ = require("jquery"); 
var View = require("./View"); 
var Model = require("./Model"); 
Backbone.$ = $; 

$(document).ready(function(){ 
    var model = new Model(); 
    var view = new View({model: model}); 
});

Browserify à la console:

browserify main.js -o bundle.js -d

L'erreur:

Uncaught TypeError: Cannot read property 'replace' of undefined

Source

2017-08-01 GlaceCelery

Une pensée - à votre avis vous utilisez 'this.el.append' ... voulez-vous dire' this. $ el.append'? Je ne suis pas familier avec 'append 'appliqué aux éléments DOM bruts. – arbuthnott

Même sans Browserify votre code ne fonctionnerait pas.

Voici ce qui se passe. Lorsque le navigateur exécute votre page, il traite <script src="bundle.js"></script> afin qu'il charge bundle.js et l'exécute immédiatement avant de créer le reste de la page. Cela signifie que lorsque le navigateur exécute cette ligne:

template: _.template($('#myTemplate').html())

Votre élément script avec id ensemble à myTemplaten'existe pas encore. Ainsi, le sélecteur jQuery ne sélectionne aucun élément et l'exécution de .html() sur un ensemble vide renvoie undefined. Donc, l'appel ci-dessus équivaut à exécuter _.template(undefined), ce qui conduit à l'erreur que vous obtenez.

Solution: déplacez le modèle de sorte qu'il se trouve devant l'élément script qui charge bundle.js.

Comme Arbuthnott a souligné dans un comment, vous voulez aussi this.$el.append au lieu de this.el.append. Vous n'avez pas reçu d'erreur car le code n'a pas eu l'opportunité de s'exécuter en raison de l'erreur que vous receviez.

Source

2017-08-01 11:50:36 Louis

Merci, ça marche maintenant. Quelle est la pratique la plus courante: charger le bundle.js avant ou après le corps? – GlaceCelery

La pratique la plus courante consiste à charger les choses dès que possible *, le plus possible étant le plus possible. S'il n'est pas possible de charger avant 'body' parce que vous dépendez des éléments qui vont exister seulement une fois' body' traité, alors vous devez charger 'bundle.js' après. – Louis

avez-vous une vue sur npm domready comme une solution de contournement? – GlaceCelery

Backbone Afficher dans un module Browserify - Ne fonctionne pas

Répondre

Questions connexes