Question

我想将我的应用程序的视图放在一个单独的js文件中。我的代码现在看起来像这样：

 var SearchApp = Backbone.View.extend({
initialize: function() { 
    // Bind all functions that uses 'this' as the current object
    _.bindAll(this, 'render', 'addDocument', 'initVisualSearch');
    this.initVisualSearch();
    this.model.bind("change:results", this.render, this);
    this.collection = this.model.get("hits");
    this.collection.bind("add", this.addDocument, this);
    this.collection.bind("reset", function() { this.collection.each(this.addDocument); }, this);

    var detailshtml = '<div id="results-N"></div>';
    detailshtml += '<div class="detailcategory" id="hits_N"></div>';
    this.$el.html(detailshtml); 
    this.model.bind("change:query", function() { 
    }, this);
},
initVisualSearch: function() { 
    this.visualSearch = VS.init({

    });
},
template: _.template($("#template-N").html()),
render : function() {
    this.$el.children("#results-N").html(this.template(this.model.toJSON()));
    return this;
}

}）;

但是，只需创建一个新的js文件并调用

 var search = new SearchApp();

不起作用。我想知道，有什么简单的解决方案可以将这个视图放在我的html文件之外吗？谢谢！

稍后编辑：这是我如何包含相关的javascript：

<script type='text/javascript' src='lib/jquery.min.js'></script>
<script type='text/javascript' src='lib/jquery-ui.min.js'></script>
<script src="lib/jquery/js/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
<script src="lib/bootstrap/bootstrap/js/bootstrap.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone/backbone.js"></script>
<script src="lib/visualsearch/build/visualsearch.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/d3.v2.min.js?2.9.3"></script>
<script type="text/javascript" src="lib/colorbrewer.js"></script>
<script type="text/javascript" src="js/d3.layout.cloud.js"></script>
<script src="js/searchApps.js"></script>

我在控制台中收到的错误是：

undefined is not a function
cannot read property 'model' of undefined
cannot read property 'visualSearch' of undefined

Answer 1

您可以使用某种脚本加载器来管理文件之间的依赖关系。例如requirejs。

search_app.js

define(['path_to_backbone'], function(Backbone){
   return Backbone.View.extend(...);
});

new.js

define(['search_app'], function(SearchApp){
   var search = new SearchApp();
})

Answer 2

您的加载顺序是正确的，并且根据您提供的错误消息，正在调用initialize函数，这意味着正在正确加载SearchApp并通过您对new SearchApp()的调用进行实例化。我怀疑错误实际上在你的代码中。

在_.bindAll函数中对initialize的调用中，您将'addDocument`函数作为参数传递，但我没有在您的视图中看到它定义。这很可能是导致错误的原因，因为这会导致其他代码无法正常工作。请检查您的代码。

此外，在实例化视图时，您需要在选项对象中传递模型，因为initialize函数依赖于它 - 示例

var searchModel = new SearchModel(...)
var searchView = new SearchApp({ model: searchModel})

Backbone.js - 将视图放在单独的js文件中

2 个答案: