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

【问题标题】：Backbone View in a Browserify Module - Not workingBrowserify 模块中的主干视图 - 不工作
【发布时间】：2017-08-01 08:37:59
【问题描述】：

我正在尝试通过将 View 和 Model 声明分成模块（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>

模型.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

【问题讨论】：

一个想法——在你看来你使用this.el.append...你的意思是this.$el.append吗？我不熟悉应用于原始 DOM 元素的append。

标签： javascript backbone.js browserify

【解决方案1】：

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

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

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

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

解决方案：移动模板，使其位于加载bundle.js 的script 元素之前。

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

【讨论】：

谢谢，现在可以了。最常见的做法是：在 body 之前或之后加载 bundle.js？
最常见的做法是尽快尽可能加载内容，其中“尽可能”是最重要的。如果无法在body 之前加载，因为您依赖的元素仅在处理body 后才会存在，那么您必须在其之后加载bundle.js。
这是一个可行的方法。真的没有单一的方法在所有情况下都是最好的，甚至是合适的。我遇到过人们抱怨使用 domready 给他们带来问题的情况。并不是说domready不好。只是不符合他们的需要。