All geek questions in one place

Using handle descriptors that display nothing

Firstly, I’m a new user, so if this is not the place to ask this question or a question seeps with detailed information, please let me know and I will make the necessary settings.

I am new to Ember.JS and I recently started learning by reading this getting started guide .

In the early stages of this guide, I already deal with the following problem:

All steps worked until I updated my index.html to wrap the internal <body> content in the Handlebars script tag:

 <script type="text/x-handlebars" data-template-name="todos">.....</script>

as indicated in the fifth step of this guide.

After that, my window ends without displaying anything (except for the background image)

This is how my files look like (hierarchical):

https://dl.dropboxusercontent.com/u/24149874/image.png

And this is the contents of the relevant files from the previous steps in the manual:

index.html

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Ember.js • TodoMVC</title> <link rel="stylesheet" href="style.css"> </head> <body> <script type="text/x-handlebars" data-template-name="todos"> <section id="todoapp"> <header id="header"> <h1>todos</h1> <input type="text" id="new-todo" placeholder="What needs to be done?" /> </header> <section id="main"> <ul id="todo-list"> <li class="completed"> <input type="checkbox" class="toggle"> <label>Learn Ember.js</label><button class="destroy"></button> </li> <li> <input type="checkbox" class="toggle"> <label>...</label><button class="destroy"></button> </li> <li> <input type="checkbox" class="toggle"> <label>Profit!</label><button class="destroy"></button> </li> </ul> <input type="checkbox" id="toggle-all"> </section> <footer id="footer"> <span id="todo-count"> <strong>2</strong> todos left </span> <ul id="filters"> <li> <a href="all" class="selected">All</a> </li> <li> <a href="active">Active</a> </li> <li> <a href="completed">Completed</a> </li> </ul> <button id="clear-completed"> Clear completed (1) </button> </footer> </section> <footer id="info"> <p>Double-click to edit a todo</p> </footer> </script> <script src="libs/jquery-1.10.js"></script> <script src="libs/handlebars.js"></script> <script src="libs/ember.js"></script> <script src="libs/ember-data-0.13.js"></script> <script src="application.js"></script> <script src="router.js"></script> </body> </html>

application.js

 window.Todos = Ember.Application.create();

router.js

 Todos.Router.map(function () { this.resource('todos', { path: '/' }); });

Of course, I tried to find the answer in other relevant posts, but nothing I found helped.

Appreciate your help!

+4
source share
3 answers

I think the only part missing here is the application template itself.

Try defining one of the following values:

 <script type="text/x-handlebars" data-template-name="application"> {{outlet}} </script> <script type="text/x-handlebars" data-template-name="todos"> ... </script>

{{outlet}} is important here, as you need to tell ember where you enter your todos template.

See here for a working example, the css file is not included, so it’s normal that everything went wrong, but the basic setup works.

Hope this helps.

+1
source

In addition to the jQuery file, even the handlebar file name is also incorrectly written in the index.html file.

Modify the index.html file with the following code:

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

Next, in the next step, note that the js file is called js / app.js or js / application.js, since the code in github has the file name as app.js, while the website displays the file name as application.js.

+1
source

FWIW, I had the same problem, and it turned out that the jQuery file in my js folder was a different version than the one called in the html tutorial. It was a simple mistake, but one of them made me notice too long.

0
source

Source: https://habr.com/ru/post/1490725/

More articles:


All Articles