Question

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

的index.html

"com.example.xyz"

Model.js

<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 Backbone = require('backbone')
Backbone.$ = $

Model = Backbone.Model.extend({

});

module.exports = Model;

main.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;

在控制台进行Browserify：

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

Answer 1

即使没有Browserify，您的代码也无效。

这是发生了什么。当浏览器执行您的页面时，它会处理<script src="bundle.js"></script>，因此它会加载bundle.js并在创建页面的其余部分之前立即执行。这意味着在浏览器执行时这一行：

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

script设置为id 的myTemplate元素尚不存在。因此，jQuery选择器不会选择任何元素，并且在空集上运行.html()会返回undefined。因此，上述调用相当于运行_.template(undefined)，这会导致您获得错误。

解决方案：移动模板，使其位于加载script的{{1}}元素之前。

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

Browserify模块中的骨干视图 - 不起作用

1 个答案: