Javascript Browserify模块中的主干视图-不工作_Javascript_Backbone.js_Browserify

Javascript Browserify模块中的主干视图-不工作

javascript backbone.js

Javascript Browserify模块中的主干视图-不工作,javascript,backbone.js,browserify,Javascript,Backbone.js,Browserify,我正试图通过将视图和模型声明分离为模块（Browserify）来创建一个功能最低的Backbone.js应用程序。我的代码： index.html <head> <script src="bundle.js"></script> </head> <body> <div id="myDiv">Loading...</div> </body> <script type="text

我正试图通过将视图和模型声明分离为模块（Browserify）来创建一个功能最低的Backbone.js应用程序。我的代码：

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>

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 main.js -o bundle.js -d

错误：

Uncaught TypeError: Cannot read property 'replace' of undefined

即使没有Browserify，您的代码也无法工作

下面是发生的情况。当浏览器执行页面时，它会处理

，因此它会加载

bundle.js

，并在创建页面的其余部分之前立即执行。这意味着在浏览器执行此行时：

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

您的

脚本

元素的

id

设置为

myTemplate

尚不存在。因此，jQuery选择器不选择任何元素，在空集上运行
.html（）
将返回
未定义的
。因此，上面的调用相当于运行
.template（undefined）
，这将导致出现错误
解决方案：移动模板，使其位于加载
bundle.js
的
script
元素之前

正如arbuthnott在a中指出的，您还需要
this.$el.append
而不是
this.el.append
。您没有在那里收到错误，因为由于您收到的错误，该代码没有获得运行的机会。
一个想法-在您看来，您使用的是
this.el.append
。。。你的意思是
这个。$el.append
？我不熟悉应用于原始DOM元素的
append
。谢谢，它现在可以工作了。最常见的做法是：在正文之前或之后加载bundle.js？最常见的做法是尽快加载内容，其中“尽快”最为重要。如果无法在
body
之前加载，因为您依赖的元素只有在处理
body
之后才会存在，那么您必须在它之后加载
bundle.js
。这是一种可行的方法。在所有情况下，没有一种方法总是最好的，甚至是合适的。我遇到过这样的情况，人们抱怨使用domready给他们带来了问题。并不是说多姆雷迪不好。只是它不适合他们的需要。
template: _.template($('#myTemplate').html())