BackboneJS 视图不断返回未定义答案

【问题标题】：BackboneJS view keeps returning not definedBackboneJS 视图不断返回未定义
【发布时间】：2016-10-05 14:04:31
【问题描述】：

我似乎无法初始化我的视图。我试着环顾四周，看看之前是否有人问过这个问题，但没有一个解决方案对我有用。我的backbonejs视图如下：

class FRView extends Backbone.View
  el: $ 'fr_view'

  initialize: ->
    console.log("created")

  render: ->
    console.log("here")

我正在尝试使用下面的代码在部分内部初始化它：

:javascript
  var curr_view = new FRView()

但我不断收到以下错误：

Uncaught ReferenceError: FRView is not defined

我也试过

:javascript
  var curr_view = new Backbone.View.FRView()

导致以下错误：

Uncaught TypeError: Backbone.View.FRView is not a constructor

从 chrome 资源浏览器中，我可以看到 FRView 文件已加载。我也尝试将它包装在文档 onload 中，但这没有帮助。知道可能导致此问题的原因吗？

【问题讨论】：

标签： ruby-on-rails backbone.js coffeescript haml

【解决方案1】：

我看到了两个错误，一个你知道，一个你很快就会发现。

第一个问题（你知道的那个）是由CoffeeScript's scoping system引起的：

词法作用域和变量安全
[...]
尽管为了清楚起见，本文档中没有显示，但所有 CoffeeScript 输出都包装在一个匿名函数中：(function(){ ... })();

所以你的 FRView 在 JavaScript 中最终看起来或多或少是这样的：

(function() {
  var FRView = ...
})();

这意味着FRView 仅在您的 CoffeeScript 文件中可见。

最简单的解决方案是将类放在全局范围内：

class @FRView extends Backbone.View

或等效：

class window.FRView extends Backbone.View

另一种常见的解决方案是为您的应用定义一个全局命名空间，然后将您的类放在该命名空间中：

class YourNameSpace.FRView extends Backbone.View

在实例化它时说new YourNameSpace.FRView。

另一个问题是你的el 看起来有点糊涂：

el: $ 'fr_view'

这里有两个问题：

这将在您的 HTML 中寻找 <fr_view> 元素，而您可能没有这样的东西。我猜你真的有<div id="fr_view"> 或者<div class="fr_view"> 这样的东西，在这种情况下你想说：
```
el: '#fr_view' # If you're using an id attribute.
el: '.fr_view' # If you're using a CSS class.
```
$ 'fr_view' 将在加载 JavaScript 时执行，并且该元素当时可能不存在。这个问题的解决方案是只使用上面的el 的选择。 el 不需要使用 jQuery 对象，Backbone 会在视图实例化时为您执行此操作。

【讨论】：

感谢您的回复，我已修正 el 错字。对于 FRView 问题，我不想将该视图添加到全局命名空间中，所以我尝试使用您的建议：class FR.FRView extends Backbone.View 然后实例化：new FR.FRView() 但我仍然有同样的未定义问题。我还尝试将其更改为全局名称空间，只是为了尝试得到以下错误： Uncaught TypeError: this._ensureElement is not a function where I defined FRVIew as: class @FRView extends Backbone.View 并通过使用实例化它：新的 FRView()
让它与全局命名空间一起工作，结果我不小心删除了“新”，再次添加了全局命名空间，但我仍然想使用我们自己的命名空间来处理我的东西我正在添加。知道我做错了什么吗？
修复了！在谷歌搜索命名空间之后，我将视图声明更改为“class Portal.Views.FRView extends Backbone.View”并使用：“new Portal.Views.FRView;”进行实例化。

【解决方案2】：

正如“mu 太短”所指出的，问题源于命名空间/声明问题。在谷歌搜索命名空间后，我浏览了this，并通过将我的backbonejs视图更改为：

class Portal.Views.FRView extends Backbone.View
    el: $ '#FRView'

    initialize: ->
        console.log("created")

    render: ->
        console.log("here")

并使用实例化它：

:javascript
    var frview = new Portal.Views.FRView();

【讨论】：