2

次の Ember.js/Require.js アプリケーションがインデックス ビューのレンダリングに失敗する理由を特定するのに役立つ人はいますか? Ember セグメントは 100% 独立して動作します。

application.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script data-main="../script/application" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.4/require.min.js"></script>
  </head>
  <body>
    <script type="text/x-handlebars-template" data-template-name="index">
      login page
      <a href="#" {{action "login"}}>Login</a>
    </script>
    <script type="text/x-handlebars-template" data-template-name="application">
      {{outlet}}
    </script>
  </body>
</html>

アプリケーション.js

require(["library/jquery", "library/handlebars", "library/ember"], function() {
    Application = Ember.Application.create({
        LOG_TRANSITIONS: true
    });

    Application.IndexView = Ember.View.extend({});

    Application.IndexController = Ember.Controller.extend({
        login: function() {
            console.log("called login controller method.");
        }
    });

    Application.Router.map(function() {
        this.route("index", {
            path: "/login" 
        });
    }); 
});

以下のファイルが Require によって正常にロードされ、Safari または Chrome ブラウザーでスクリプト エラーが表示されないことを確認しました。

  • application.html
    • アプリケーション.js
    • ember.js
    • ハンドルバー.js
    • jquery.js
    • require.min.js

バージョン情報

必須: 2.1.4

jQuery: v1.9.1

残り火: v1.0.0-rc.1

ハンドルバー: 1.0.0-rc.3

4

2 に答える 2

4

だから、しばらく頭を叩いて夜を過ごした後。私はついにEmber＆Requireの良い演奏の例を手に入れました。

https://github.com/ben-crowhurst/EmberRequireSetup

EmberのセットアップとDOMの解析のタイミングと相まって、アプリケーションモジュール/依存関係のロードに関連するいくつかの問題が見つかりました。

于 2013-02-27T10:58:18.150 に答える
2

この問題は、依存関係を関数本体に渡さないことが原因である可能性があります。そうしないと、すべての依存関係がグローバルスコープに「マウント」されている場合にのみ機能します（およびの利点の1つは、requirejsそれについて心配するのを完全にやめることができることです）。

これを試して：

require(["library/jquery", "library/handlebars", "library/ember"],
  function($, handlebars, Ember) {

    // verify that none of these is undefined
    console.log($, handlebars, Ember);

    var Application = Ember.Application.create({
        LOG_TRANSITIONS: true
    });

    (...)
});

コンソールに出力された変数のいずれかがまだ残っている場合は、構成が正しくないundefinedことを示しています。requirejsChrome の開発ツールを強くお勧めします。関数本体の最初の行にブレークポイントを設定し、アプリケーションがフリーズしたときにローカル/クロージャー スコープを調査できます。「キャッチされていない例外で一時停止」も大いに役立ちます。

また、モジュール内からグローバル オブジェクトを作成しないようにすることをお勧めします (そのvarため、Application 変数に a を追加しました)。モジュールの目的の 1 つは、外部に「漏れる」ものを厳密に制限することです。

最後に、タグ内に格納されたコードrequirejsで動作するとは確信していません。ブラウザが のその部分を処理するまでに読み込まれることさえ保証されていません。私は一度も使用したことがありませんが、そうであれば、これを処理する正しい方法はすでにSOのどこかにあると確信しています:)。Handlebars<script>Handlebarsapplication.htmlhandlebars

于 2013-02-26T23:07:48.190 に答える