在Browserify模塊中的骨幹視圖 - 不工作

我試圖通過將視圖和模型聲明分離爲模塊（Browserify）來創建一個最小功能的Backbone.js應用程序。我的代碼：在Browserify模塊中的骨幹視圖 - 不工作

的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在控制檯：

browserify main.js -o bundle.js -d

錯誤：

Uncaught TypeError: Cannot read property 'replace' of undefined

來源

2017-08-01 GlaceCelery

一個想法 - 在你看來，你使用'this.el.append' ...你的意思是'this。$ el.append'？我不熟悉應用於原始DOM元素的'append'。 – arbuthnott

即使沒有Browserify您的代碼將無法正常工作。

這是發生了什麼事。當瀏覽器執行你的頁面時，它會處理<script src="bundle.js"></script>，因此它會在加載bundle.js並在創建頁面的其餘部分之前立即執行。這意味着，由當時的瀏覽器中執行這一行：

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

你script與id設置爲myTemplate元素尚不存在。因此，jQuery選擇器不選擇元素，並在空集上運行.html()返回undefined。所以上面的調用相當於運行_.template(undefined)，這會導致您得到的錯誤。

解決方案：移動模板，使其位於加載bundle.js的script元素之前。

由於arbuthnott在comment指出的那樣，你也想this.$el.append而不是this.el.append。你沒有在那裏得到一個錯誤，因爲你得到的錯誤代碼沒有得到運行的機會。

來源

2017-08-01 11:50:36 Louis

謝謝，它現在有效。什麼是最常見的做法：在bundle之前或之後加載bundle.js？ – GlaceCelery

最常見的做法是儘可能快地加載內容*，儘可能「最重要」。如果不能在'body'之前加載，因爲依賴於僅在處理了'body'後才存在的元素，則必須在其後加載'bundle.js'。 – Louis

您是否有npm domready作爲解決方法的觀點？ – GlaceCelery

在Browserify模塊中的骨幹視圖 - 不工作

回答

相關問題