nothing inside <script type="text/x-handlebars"> is displaying

StackOverflow https://stackoverflow.com/questions/20847692

Frage

I'm trying to pick up emberJS with the blog tutorial https://www.youtube.com/watch?v=1QHrlFlaXdI#t=56 and ember-app-kit. What changes does EAK make that are preventing me from rendering things with handlebars?

I didn't clear app.js like in the screencast. my app.js file

import Resolver from 'resolver';

var App = Ember.Application.extend({
LOG_ACTIVE_GENERATION: true,
LOG_MODULE_RESOLVER: true,
LOG_TRANSITIONS: true,
LOG_TRANSITIONS_INTERNAL: true,
LOG_VIEW_LOOKUPS: true,
modulePrefix: 'appkit', // TODO: loaded via config
Resolver: Resolver['default']
});

Ember.RSVP.configure('onerror', function(error) {
// ensure unhandled promises raise awareness.
// may result in false negatives, but visibility is more important
if (error instanceof Error) {
Ember.Logger.assert(false, error);
Ember.Logger.error(error.stack);
}
});

export default App;

my index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- build:css(tmp/result) /assets/app.min.css -->
  <link rel="stylesheet" href="/assets/app.css">
  <link rel="stylesheet" href="/vendor/bootstrap/dist/css/bootstrap.css">
  <!-- endbuild -->

  <!-- for more details visit: https://github.com/yeoman/grunt-usemin -->

  <!-- build:js(tmp/result) /assets/config.min.js -->

    <script src="/config/environment.js"></script>
    <!-- @if tests=false -->

      <!-- @if dist=false -->
      <script src="/config/environments/development.js"></script>
      <!-- @endif --><!-- @if dist=true -->
      <script src="/config/environments/production.js"></script>
      <!-- @endif -->

    <!-- @endif --><!-- @if tests=true -->
      <script src="/config/environments/test.js"></script>
    <!-- @endif -->

  <!-- endbuild -->

  <!-- build:js(tmp/result) /assets/vendor.min.js -->

    <script src="/vendor/jquery/jquery.js"></script>
    <script src="/vendor/momentjs/moment.js"></script>
    <script src="/vendor/showdown/src/showdown.js"></script>

    <!-- @if dist=false -->
    <script src="/vendor/handlebars/handlebars.js"></script>
    <script src="/vendor/ember/ember.js"></script>
    <!-- @endif --><!-- @if dist=true -->
    <script src="/vendor/handlebars/handlebars.runtime.js"></script>
    <script src="/vendor/ember/ember.prod.js"></script>
    <!-- @endif -->

    <script src="/vendor/ember-data/ember-data.js"></script>
    <script src="/vendor/loader.js"></script>
    <script src="/vendor/ember-resolver/dist/ember-resolver.js"></script>
    <script src="/vendor/ic-ajax/main.js"></script>

  <!-- endbuild -->

  <!-- build:js(tmp/result) /assets/app.min.js -->

    <script src="/assets/app.js"></script>
    <script src="/assets/templates.js"></script>

  <!-- endbuild -->

  <!-- @if tests=true -->
  <link rel="stylesheet" href="/vendor/qunit/qunit/qunit.css">
  <script src="/vendor/qunit/qunit/qunit.js"></script>

  <style>
    #ember-testing-container {
      position: absolute;
      background: white;
      bottom: 0;
      right: 0;
      width: 640px;
      height: 384px;
      overflow: auto;
      z-index: 9999;
      border: 1px solid #ccc;
    }
    #ember-testing {
      zoom: 50%;
    }
  </style>
  <!-- @endif -->

</head>
<body>
  <!--[if lt IE 8]>
    <p class="browsehappy">
      You are using an <strong>outdated</strong> browser. Please
      <a href="http://browsehappy.com/">upgrade your browser</a>
      to improve your experience.
    </p>
  <![endif]-->

  <!-- @if tests=true -->
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="/tests/tests.js"></script>
  <script src="/tests/test_helper.js"></script>
  <script src="/tests/test_loader.js"></script>
  <!-- @endif -->

  <!-- @if tests=false -->
  <script type="text/x-handlebars">
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">Blogger</a>
        <ul class="nav">
          <li><a href="#">Posts</a></li>
          <li><a>About</a></li>
        </ul>
      </div>
    </div>
  </script>
  <!-- @endif -->
    <h2>Welcome to Ember.js</h2>
  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
    <button id="btnChange">change model</button>
    {{outlet}}
  </script>

</body>
</html>
War es hilfreich?

Lösung

Handlebars stuff is put into the templates/ directory in EAK. So Keep app.js and index.html the way they come originally. Your index.html should be like

<!-- @if tests=false -->
<script>
  window.App = require('appkit/app')["default"].create();
</script>
<!-- @endif -->

add the stuff tom adds for handlebars in the templates/ directory.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top