1

このHTML5プロジェクトを開始したばかりで、jQuery $ .load（）メソッドを利用して単一ページアーキテクチャにすることにしました。残念ながら、JSが成長し始めるとすぐに、マスターダッシュボードにロードされたモジュールが親を認識していないという問題が発生し始めました。

アーキテクチャは次のようになります。

Dashboard.html （マスターファイル）
moduleA.html
moduleA.js
moduleB.html
moduleB.js
moduleC.html
moduleC.js

JSも個別のファイルとして保持することにしたため、modulexのロード時に個別に呼び出すには、dashboard.htmlを介してすべてのJSファイルをロードする必要があります。

したがって、moduleA.htmlをダッシュ​​ボードにロードするときは、対応するJSを呼び出す必要があります。これを行うには、モジュールパターンを使用してJSを記述しただけなので、次のような関数呼び出しを実行して簡単に呼び出すことができます。

<スクリプト>

moduleA

</ script>

または、このメンバーの特定のプロパティにアクセスする場合はこれ。

<スクリプト>

moduleA.someMethod（）;

</ script>

今、私はこれを行うためのより良い方法がなければならないことを知っていますよね？対応するJSファイルをロードするために、HTMLモジュールにスクリプトタグが必要になるのは嫌です。

これのもう1つの制限は、スクリプトとCSSの呼び出しが親（dashboard.html）で行われるため、モジュールを個別に処理できなくなったことです。したがって、moduleA.htmlが直接読み込まれると、スクリプトやスクリプトのない純粋なHTMLになります。 CSS。

他の質問にも目を通しましたが、同じ問題を抱えている人は誰もいませんでした。

AngularJS、EmberJS、KO.JS、BoilerPlateJSを見ましたが、どれも私たちが達成しようとしていることに対応していません。同様の単一ページの概念を持つ唯一のものはjQueryMobileですが、jQueryからjQuery Mobileに切り替えることができ、すべてが機能し続けるかどうかはわかりません。

誰かがこの問題にまだ直面していますか？解決策はありますか、それともカスタムソリューションを使用する必要がありますか。

ありがとう！

4

2 に答える 2

2

AngularJSについてあなたと議論することができます。それはまさにあなたが必要とするものです

ng-viewDashboard.htmlはいくつかのディレクティブがアタッチされたレイアウトですが、ディレクティブを使用する場合はAngularJsに力があります

ここに例があります：

Dashboard.js

var app = angular.module("modularApp",[]);
app.config(['$routeProvider', "$locationProvider", function routes($routeProvider, $locationProvider) {
    $routeProvider.when('/dashboard', {
        controller:'HomeCtrl',
        templateUrl:'templates/home.html'
    });    
    $routeProvider.when('/moduleA', {
        controller:'ModuleACtrl',
        templateUrl:'templates/moduleA.html'
    });
    $routeProvider.when('/moduleB', {
        controller:'ModuleBCtrl',
        templateUrl:'templates/moduleB.html'
    });
    $routeProvider.otherwise({redirectTo: "/dashboard"});
}]);

テンプレート/ダッシュボード.html

<html ng-app="modularApp">
<head>
  <!--.... include angular minified js file and what else you need...-->
  <script type="text/javascript" src="dashboard.js"></script>
  <script type="text/javascript" src="moduleACtrl.js"></script>
  <script type="text/javascript" src="moduleBCtrl.js"></script>
</head>
<body>
  <a ng-href="#/moduleA">Open Module A View</a>
  <a ng-href="#/moduleB">Open Module B View</a>
  <!-- Add widgets header menus .... -->
  <ng-view></ng-view>
</body>
</html>

moduleACtrl.js

var app=angular.module("modularApp");
app.controller("ModuleACtrl",function($scope){
  $scope.scopeValue="Hellow from view";
});

moduleBCtrl.js

var app=angular.module("modularApp");
app.controller("ModuleBCtrl",function($scope){
  $scope.scopeValue="Hellow from another view";
});

テンプレート/moduleA.html

<div>{{scopeValue}} in module A</div>

テンプレート/moduleB.html

<div>{{scopeValue}} in module B</div>

これだけでなく、Angularを使用してより複雑なことを行うことができます。すべてはあなたのニーズに依存します。特別な要件はありますか:)

また、ng-viewなどの独自のディレクティブを作成し、独自の$routeサービスと$routeProviderを使用して、いくつかのルートがurlに一致したときに動的にロードするcssとjavascriptを追加できます。

したがって、上記のルーティングテーブルの代わりに、

app.config(['$myRouteProvider', "$locationProvider", function routes($routeProvider, $locationProvider) {
        $routeProvider.when('/dashboard', {
            javascript:'javascript/dashboard.js',
            templateUrl:'templates/dashboard.html',
            cssfile: 'css/dashboard.css'
        });    
        $routeProvider.when('/moduleA', {
            javascript:'javascript/moduleA.js',
            templateUrl:'templates/moduleA.html',
            cssfile: 'css/moduleA.css'
        });
        $routeProvider.when('/moduleB', {
            javascript:'javascript/moduleB.js',
            templateUrl:'templates/moduleB.html',
            cssfile: 'css/moduleB.css'

        });
        $routeProvider.otherwise({redirectTo: "/dashboard"});
    }]);

しかし、それは、私のフランス語の愚かさを許してください。同様のことを実現するためにRubyonRailsで試したライブラリがいくつかありますが、バックエンドはコンテンツまたはコンテンツの一部をレンダリングしています。しかし、どのバックエンドを使用しているかわかりません。とにかくレールに切り替えることに興味があります。

于 2012-08-17T18:59:41.610 に答える
0

BoilerplateJSのDomControllerは、カスタムHTML属性を使用せずに、必要なことを実行します。Dashboard.htmlには、コンポーネントを挿入するプレースホルダーを含めることができます。以下のHTMLをBoilerplateJSindex.htmlから取り出して、どのように機能するかを示しています。

<body>
    <section id="page-content">
        <header>
            <section class="theme"></section>
            <section class="language"></section>
        </header>
        <aside>
            <section class="main-menu"></section>
        </aside>
    </section>
</body>

上記のテーマ、言語、メインメニューのセクションは、DomControllerによって関連するコンポーネントが挿入されるプレースホルダーにすぎません。DomControllerを使用して、以下のように適切なセレクターにコンポーネントを登録できるようになりました。

    //scoped DomController that will be effective only on $('#page-content')
    var controller = new Boiler.DomController($('#page-content'));
    //add routes with DOM node selector queries and relavant components
    controller.addRoutes({
        ".main-menu" : new MainMenuRouteHandler(context),
        ".language" : new LanguageRouteHandler(context),
        ".theme" : new ThemeRouteHandler(context)
    });
    controller.start();

上記のコードは「/boilerplatejs/src/modules/baseModule/module.js」から抽出されたものです

于 2012-08-20T15:38:47.903 に答える