Initial Handlebars.js Нет Функциональность

Я пытаюсь изучить Handlebars.js (первый час) &, кажется, попадает в исходную проблему (она не работает).Initial Handlebars.js Нет Функциональность

Вот мой HTML:

<!doctype html> 

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script> 
    <script src="js/handlebars-v4.0.5.js"></script> 
    <script src="js/main.js"></script> 
</head> 

<body> 
    <p>Hi!</p> 
    <script id="some-template" type="text/x-handlebars-template"> 
     <table> 
      <thead> 
       <th>Username</th> 
       <th>Real Name</th> 
       <th>Email</th> 
      </thead> 
      <tbody> 
       {{#users}} 
       <tr> 
        <td>{{username}}</td> 
        <td>{{firstName}} {{lastName}}</td> 
        <td>{{email}}</td> 
       </tr> 
       {{/users}} 
      </tbody> 
     </table> 
    </script> 
</body> 

</html>

Вот мой main.js:

$(document).ready(function() { 
    console.log("I'm Here!"); 
    var source = $("#some-template").html(); 
    var template = Handlebars.compile(source); 
    var data = { 
     users: [{ 
      username: "alan", 
      firstName: "Alan", 
      lastName: "Johnson", 
      email: "[email protected]" 
     }, { 
      username: "allison", 
      firstName: "Allison", 
      lastName: "House", 
      email: "[email protected]" 
     }, { 
      username: "ryan", 
      firstName: "Ryan", 
      lastName: "Carson", 
      email: "[email protected]" 
     }] 
    }; 
    $("#content-placeholder").html(template(data)); 
});

Я вижу журнал консоли, но таблица не записывается на всех. Нет сообщений об ошибках в консоли & Я немного застрял в том, где находится загвоздка.

Надеюсь, это не усталость вызывает что-то очевидное, как опечатка ...

источник

2016-01-08 Mr T

Я не вижу '# контент-placeholder' в любом месте вашей страницы. Если это так, тогда '$ (« # content-placeholder »). Html (template (data));' ничего не делает. – jfriend00

Я использовал это руководство - http://blog.teamtreehouse.com/getting-started-with-handlebars-js, очевидно, что в руководстве есть опечатка. Я ответил на вопрос с изменениями, чтобы заставить код работать. Спасибо за помощь. –

Похоже, что руководство просто предполагает, что вы должны иметь в своем документе '

' в качестве объекта для '$ (« # content-placeholder »). Html (template (data));'. Я бы не стал называть это опечаткой, но они просто не отобразили весь HTML-документ, необходимый для того, чтобы сделать их образец работы (скорее, упущения, чем опечатки). В любом случае, рад, что вы поняли это. – jfriend00

Чтобы ваш код работал так, как он есть, вам необходимо определить элемент HTML в вашем документе, который соответствует #content-placeholder, так что $("#content-placeholder").html(template(data)); имеет место для размещения визуализированного шаблона.

Вы могли бы решить, что, добавив его в HTML, как это:

<!doctype html> 

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script> 
    <script src="js/handlebars-v4.0.5.js"></script> 
    <script src="js/main.js"></script> 
</head> 

<body> 
    <p>Hi!</p> 
    <script id="some-template" type="text/x-handlebars-template"> 
     <table> 
      <thead> 
       <th>Username</th> 
       <th>Real Name</th> 
       <th>Email</th> 
      </thead> 
      <tbody> 
       {{#users}} 
       <tr> 
        <td>{{username}}</td> 
        <td>{{firstName}} {{lastName}}</td> 
        <td>{{email}}</td> 
       </tr> 
       {{/users}} 
      </tbody> 
     </table> 
    </script> 

    <!-- Add this line --> 
    <div id="content-placeholder"></div> 
</body> 

</html>

источник

2016-01-09 01:01:56 jfriend00

Спасибо. Я ожидал, что это не сработает, поскольку стол был вне этого. Это работает ?! –

@MrT - Я не уверен, что вы просите. Таблица находится в шаблоне и упоминается идентификатором шаблона '' some-template''. '' Content-placeholder ''div - это просто место на вашей странице, чтобы вставить содержимое с помощью' $ («# content-placeholder»). Html (template (data)); '. Вы можете поместить его в любом месте документа (за исключением не внутри шаблона). – jfriend00

Ах. ОК. В этом есть смысл. Пока он находится там, он найдет соответствующий {{xyz}}? –

Я изменил

$("#content-placeholder").html(template(data));

$('body').append(template(data));

& я получил желаемый результат.

источник

2016-01-09 00:33:26

Initial Handlebars.js Нет Функциональность

ответ

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