骨干/咖啡腳本中的繼承問題

Question

因此，我正在使用Backbone / CoffeeScript啟動此新應用。 我使用的是Sinatra的后端，因此我的Coffeescript編譯器是默認的命令行之一，僅用於創建js文件。 我正在嘗試創建一個應用程序，其中存在其他類繼承自其中的主類。 由於某種原因，我遇到了一些錯誤。 這是錯誤

TypeError: 'undefined' is not an object (evaluating 'n.replace')
TypeError: 'undefined' is not an object (evaluating 'parent.prototype')
TypeError: 'undefined' is not a constructor (evaluating 'new FileApp.UploaderView()')

這是我的基礎課

class FileApp.Controller extends Backbone.View
template: _.template($('#FileAppTemplate').html())

initialize: (office) ->
    @office = office
    @render()

render:  ->
    # Attach view to DOM
    $('#fileUploaderApp').append(@$el)


bindViews: (uploaderView, fileViewerView, fileDetailView) ->
    @uploaderView = uploaderView
    @fileViewerView = fileViewerView
    @fileDetailView = fileDetailView

這是一個繼承類的例子

 class FileApp.FileViewerView extends FileApp.Controller 

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

# 
# render ->
# 
render: ->
    @$el.html(@template)
    # Append to fileViewer Div

    @renderFiles()

# 
# createFiles ->
# 
renderFiles: ->

這是我的.erb文件加載每個項目並實例化該應用程序的方式。

<script id="namespacing">
    //All backbone classes attach to this variable
    var FileApp={};
</script>

<!-- Underscrore/Backbone -->
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>


<script src="/js/fileUploader/libs/file_app_view.js"></script>
<script src="/js/fileUploader/libs/uploader_view.js"></script>
<script src="/js/fileUploader/libs/file_detail_view.js"></script>
<script src="/js/fileUploader/libs/file_model.js"></script>
<script src="/js/fileUploader/libs/file_viewer_view.js"></script>
<script src="/js/fileUploader/libs/file_view.js"></script>


<div id="fileUploaderApp"></div>

<script>
    $(document).ready(function(){
        var App = new FileApp.Controller();

        // # Create Uploader
        var uploaderView = new FileApp.UploaderView();
        // # Create File Viewer
        var fileViewerView = new FileApp.FileViewerView();
        // # Create File Detail View
        var fileDetailView = new FileApp.FileDetailView();

        App.bindViews(uploaderView, fileViewerView, fileDetailView)
    });
</script>

如果有人能澄清我的問題是那太好了。

Answer 1

嘗試這個

@$el.html(@template())

代替

@$el.html(@template)

另外，您將需要將參數傳遞給模板

@$el.html(@template(parameter1: 'value1', parameter2: 'value2'))

通常，在您看來，您有一個模型，如果您的模型是辦公室，則可以執行以下操作：

@$el.html(@template(var_referencing_office.toJSON()))

這只是一個例子。 我不知道你是否通過了這一觀點。

Answer 2

我已通過將.coffee文件編譯成一個.js文件來解決此問題。 似乎通過繼承它僅僅是能夠看到我試圖繼承的類的問題。 由於Coffeescript將所有文件都放在一個閉包中，所以我的類無法訪問其他要繼承的類。

我一開始嘗試使用命名空間來處理它，但是每個人都知道使用coffescript很容易...

最終，我只制作了一個.js文件（無論哪種方法，結果都更好）解決了該問題。

如果有人需要將許多文件編譯成一個文件，這里是我正在使用的bash命令。 它將文件“ app.js”放置在當前目錄的“ libs /”目錄中，並編譯當前目錄的“ src /”目錄中的所有文件。

 coffee --output libs --join app.js --compile --watch src/

感謝其他人的幫助。