Backbone 在 Browserify 模块中查看 - 不工作

Question

我正在尝试通过将视图和模型声明分成模块 (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>

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

错误：

Uncaught TypeError: Cannot read property 'replace' of undefined

Answer 1

即使没有 Browserify，您的代码也无法运行。

事情是这样的。当浏览器执行您的页面时，它会处理 <script src="bundle.js"></script>，因此它会加载 bundle.js 并立即执行 ，然后再创建页面的其余部分。 这意味着到时候浏览器执行这一行：

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

您的 script 元素 id 设置为 myTemplate 尚不存在 。因此 jQuery 选择器不选择任何元素，并且运行宁 .html() 在空集 returns undefined 上。所以上面的调用等同于运行ning _.template(undefined)，这会导致你得到错误。

解决方案：移动模板，使其位于加载 bundle.js.

的 script 元素之前

正如 arbuthnott 在中指出的那样，您还需要 this.$el.append 而不是 this.el.append。您没有在那里收到错误，因为由于您收到的错误，该代码没有机会运行。

Backbone 在 Browserify 模块中查看 - 不工作

Backbone View in a Browserify Module - Not working

javascript

backbone.js

browserify