Question

我是Ember的初学者。目前我正在使用前端的EmberJS开发Dashboard Web应用程序，NodeJS在后端提供RESTful服务。我获得了这个Metronic Responsive Admin Dashboard模板，可以在EmberJS中实现。

我目前的问题：

我试图将Metronic的索引页面渲染为Ember中的Handlebars模板。我有一个带有{{outlet}}助手的 index.html 和一个 index.hbs ，其中我放置了Metronic索引页面的正文。编译模板并运行代码后，渲染的全宽页面没有侧边栏，而调整大小的半角版本正确显示。 />

全宽页面：
您可以看到左侧没有按钮或空格来切换侧边栏。 full-width page
（原谅我，但我没有足够的代表发布图片）
半角，调整页面：
您可以看到侧边栏切换按钮和侧边栏内容。 half-width page

这是什么问题？为什么只有响应，调整大小的版本可以显示，而全屏版本不能？ Ember和Handlebars与它有什么关系吗？

index.html 代码和 index.hbs 如下所示。

的index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Inventory App</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
</head>
<body class="page-header-fixed page-full-width">
    <!-- Application Entry -->
    <script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
    </script>
    <script src="./scripts/libs.js"></script>
    <script src="./scripts/app.js"></script>
</body>
</html>

index.hbs

<div class="page-header-fixed page-sidebar-fixed">
<!-- declaring stylesheet here -->
<div class="page-header navbar navbar-fixed-top">
     <!-- header here -->
</div>
<div class="page-container">
    <div class="page-sidebar-wrapper">
        <div class="page-sidebar navbar-collapse collapse">
            <ul class="page-sidebar-menu" data-auto-scroll="false" data-auto-speed="200">
            <!-- list of items here -->
            </ul>
        </div>
    </div>
    <div class="page-content-wrapper">
        <!-- page content here -->
    </div>
</div>
<!-- loading javascript here -->
</div>

在EmberJS中实施Metronic响应模板

0 个答案: