2013-12-30 4 views
1

Я пытаюсь подобрать emberJS с помощью учебника блога https://www.youtube.com/watch?v=1QHrlFlaXdI#t=56 и набора ember-app-kit. Какие изменения делает EAK, которые мешают мне делать вещи с рулями?ничего внутри <script type = "text/x-handlebars"> отображает

Я не очистил app.js, как в скринкасте. мои app.js файл

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; 

мой 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> 

ответ

2

Рули материал помещается в templates/ каталог в ЕАК. Так что держите app.js и index.html так, как они изначально приходят. Ваш index.html должен быть как

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

добавить материал Том добавляет к рулю в каталоге templates/.

Смежные вопросы