1

我刚刚开始了这个 HTML5 项目，我们决定通过利用 jQuery 的 $.load() 方法使其成为单页架构。不幸的是，一旦 JS 开始增长，我们很快就开始遇到加载到主仪表板中的模块不知道其父级的问题。

架构如下所示：

dashboard.html（主文件）
moduleA.html
moduleA.js
moduleB.html
moduleB.js
moduleC.html
moduleC.js

由于我们决定将 JS 保留为单独的文件，因此我们必须通过 dashboard.html 加载所有 JS 文件，以便在加载 modulex 时单独调用它们。

因此，当将 moduleA.html 加载到仪表板中时，我们必须调用其对应的 JS。为此，我们只需使用模块模式编写 JS，这样我们就可以通过函数调用轻松调用它，例如：

<脚本>

模块A

</脚本>

或者如果我们想访问该成员的特定属性，则为 this。

<脚本>

模块A.someMethod();

</脚本>

现在，我知道必须有更好的方法来做到这一点，对吧？我讨厌必须在 HTML 模块中有脚本标签才能加载其相应的 JS 文件。

另一个限制是我们不再可以单独处理模块，因为脚本和 CSS 调用发生在父级 (dashboard.html) 上，所以当 moduleA.html 直接加载时，它是纯 HTML，没有脚本或CSS。

我查看了其他问题，但没有看到任何人有同样的问题。

我查看了 AngularJS、EmberJS、KO.JS 和 BoilerPlateJS，但它们都没有解决我们想要完成的任务。唯一具有类似单页概念的是 jQuery Mobile，但我不知道您是否可以从 jQuery 切换到 jQuery Mobile，并且一切正常。

有没有人面临这个问题？是否有解决方案，或者我必须使用自定义解决方案。

谢谢！

4

2 回答 2

2

我可以和你争论 AngularJS。这正是您所需要的

ng-viewdashboard.html 是附加了一些指令的布局，但如果你使用指令，则权力在于 AngularJs

这是示例：

仪表板.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"});
}]);

模板/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>

模块ACtrl.js

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

模块BCtrl.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"});
    }]);

但是，请原谅我的法语，笨蛋。我在 ruby​​ on rails 中尝试了几个库来实现类似的效果，但后端正在渲染内容，或者只是部分内容。但是我不确定您使用的是哪个后端，并且您是否有兴趣切换到 Rails。

于 2012-08-17T18:59:41.610 回答
0

BoilerplateJS 中的 DomController 可以满足您的需求，而无需使用任何自定义 HTML 属性。您的dashboard.html 可以只包含您想要注入组件的占位符。我只是从 BoilerplateJS index.html 中提取一些 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 回答