javascript - Ember.js 新手,我可以渲染除根应用程序模板之外的所有模板

标签 javascript templates ember.js handlebars.js

如果这是一个简单的错误或者我没有意识到一些非常明显的事情,我提前道歉。我已经在 StackOverflow 上查看了其他用户的问题,但仍然无法让我的问题正常工作。我究竟做错了什么?我正在网上学习教程,我的代码看起来与我的讲师相同。

我的问题是,我可以通过在浏览器中输入我的路线到 URL 中,让 Ember 渲染“关于”、“关于/团队”、“联系人”的模板,但是一旦我将 Handlebars 模板添加到我的应用程序(我计划然后使用无序列表导航到这些路由/模板)它不会呈现我的应用程序模板。

这是我的代码。

<html>
<head>
  <title>Let's Learn Ember.js</title>

    <script src="js/libs/jquery-1.10.2.js"></script>
    <script src="js/libs/handlebars-1.0.0.js"></script>
    <script src="js/libs/ember.js"></script>

<script>
  window.App = Ember.Application.create();

  App.Router.map(function(){
    this.resource("about", function(){
      this.route("team")
    });
    this.route("contact");

  });
</script>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="application">

  <nav>
    <ul>
      <li>{{#linkTo "index"}}Home{{/linkTo}}</li>
      <li>{{#linkTo "about"}}About{{/linkTo}}</li>
        <ul>
          <li>{{#linkTo "about.team"}Team{{/linkTo}}</li>
        </ul>
      </li>
      <li>{{#linkTo "contact"}Contact{{/linkTo}}</li>
    </ul>
  </nav>

  {{outlet}}
  </script>


  <script type="text/x-handlebars" data-template-name="index">
    <h1>Welcome to Ember.js </h1>
  </script>

  <script type="text/x-handlebars" data-template-name="about">
    <h1>About Page</h1>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="about/team">
    <h2>here is our team!</h2>
  </script>

  <script type="text/x-handlebars" data-template-name="contact">
    <h1>Please contact us!</h1>
  </script>

</body>
</html>

编辑 事实证明,这是因为我没有用“团队”和“联系人”的链接结束 Handlebars 上的双大括号。

抱歉问了个愚蠢的问题。

最佳答案

您在链接上缺少一些右括号。这是修复后的内容

  <li>{{#linkTo "about.team"}}Team{{/linkTo}}</li>
    </ul>
  </li>
  <li>{{#linkTo "contact"}}Contact{{/linkTo}}</li>

很容易错过!强烈建议将控制台保持在浏览器中,它会捕获解析错误。

关于javascript - Ember.js 新手,我可以渲染除根应用程序模板之外的所有模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25982563/

相关文章:

javascript - EmberJS Controller 未定义

javascript - 反转对象与其他对象事件的耦合方式

javascript - 使用 jQuery 从 JSON 访问数据

跨文件共享的 C++ 模板特化定义

javascript - Angular 2。 Angular 日历事件单元详细信息模板

c++ - 类模板的成员模板的成员模板的显式模板函数特化是否有效?

ember.js - ember data 1.0.x 双向时不保存 hasMany 关系

ember.js - Ember 引用属性或 getter

javascript - JQuery .show() - 无效

Javascript:indexOf() 和 substr() 未返回日期字符串的预期结果