0

Backbone.js に関するドキュメントをオンラインで見つけるのは非常に簡単ですが、適切なクラス分離を使用してプロジェクトで Backbone をセットアップする方法に関するチュートリアルやドキュメントを見つけるのは簡単ではありません。ほとんどのチュートリアルでは、すべてのコードを doc ready 関数にダンプするだけです...実際にはそうではありません。

ここにあるバックボーンの名前空間パターンに従おうとしています（バニラjsではなくcoffeescriptを使用）http://ricostacruz.com/backbone-patterns/#namespace_convention

これが私の基本的なセットアップです：

index.html

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
                <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.css" />
                <!--link rel="stylesheet" type="text/css" href="css/white-skateapp-theme.css" /-->
        <link rel="stylesheet" type="text/css" href="css/jquery-mobile-overrides.css" />
        <link rel="stylesheet" type="text/css" href="css/custom-icons.css" />
                <title>Hello World</title>
    </head>
    <body>

            <!-- SPOTS LIST -->
            <div data-role="page" id="spots">

                <div data-role="header">
                    <h1>Spots</h1>
                    <a href="#search" data-role="button" class="ui-btn-right" data-icon="search" data-corners="false">search</a>
                </div><!-- /header -->

                <div data-role="content">   
                    spots list
                </div><!-- /content -->

                <!-- footer fixed bottom -->
                <div data-role="footer" class="ui-bar" data-position="fixed">
                    <div data-role="navbar">
                        <ul>
                            <li><a href="#home">Home</a></li>
                            <li><a href="#spots">Spots</a></li>
                            <li><a href="#me">Me</a></li>
                            <li><a href="#friends">Friends</a></li>
                        </ul>
                    </div>
                    <!-- /navbar -->
                </div>


            </div><!-- /page -->

                <script type="text/javascript" src="cordova-2.1.0.js"></script>
        <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
                <script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
                <script type="text/javascript" src="js/underscore.js"></script>
                <script type="text/javascript" src="js/backbone.js"></script>

                <!-- backbone -->
                <!-- backbone views -->
                <script type="text/javascript" src="js/app/views/spots_list.js"></script>

                <!-- backbone app js file, not to be confused with phonegap app.whatever -->
                <script type="text/javascript" src="js/app.js"></script>

                <!-- initialize the phonegap app -->
                <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

app.coffee

window.App =
  Models: {}
  Views: {}
  Collections: {}
  Routers: {}
    init: ->
      spotsList = new App.Views.SpotsList()


$ ->
  console.log "init"
  App.init()

spot_index.coffee

class App.Views.SpotsListView extends Backbone.View

  el: $ 'body'

  initialize: ->
    console.log "initialize called"

ディレクトリとプロジェクトのセットアップは次のようになります。

フォルダ構成のイメージ

問題は、ドキュメントの準備ができたときに、次のエラーが発生することです。

Uncaught ReferenceError: App is not defined

次のエラーも表示されます。

Uncaught TypeError: Object #<Object> has no method 'init' app.js:20
(anonymous function) app.js:20
fire jquery-1.8.2.js:974
self.fireWith jquery-1.8.2.js:1082
jQuery.extend.ready jquery-1.8.2.js:406
DOMContentLoaded

(ところで、このプロジェクトは Phonegap、coffeescript、backbone.js、および jQuery Mobile で行われます)

4

1 に答える 1

3

私は引用します：

        <!-- backbone -->
        <!-- backbone views -->
        <script type="text/javascript" src="js/app/views/spots_list.js"></script>

        <!-- backbone app js file, not to be confused with phonegap app.whatever -->
        <script type="text/javascript" src="js/app.js"></script>

少なくとも、Appに関連するものの前にapp.jsスクリプトを呼び出す必要があります。最初にオブジェクトを定義しなかった場合、オブジェクトを呼び出すことはできません。だから右

    <!-- backbone app js file, not to be confused with phonegap app.whatever -->
    <script type="text/javascript" src="js/app.js"></script>

    <!-- backbone -->
    <!-- backbone views -->
    <script type="text/javascript" src="js/app/views/spots_list.js"></script>
于 2012-10-14T00:10:33.793 に答える