Handlebar возвращает пустые данные в консоли - PullRequest
Новая
       8

Handlebar возвращает пустые данные в консоли

0 голосов
/ 24 апреля 2020

Я новичок в руле. Я использую руль для извлечения json данных из метода выборки. Я добавил свой шаблон в файл hbs и пытался получить внутренний HTML этого идентификатора перед компиляцией шаблона. однако, когда я получаю пустые данные, когда я получаю внутренний HTML из id = "note-test". Я что-то пропустил от myside? 

console.log(' notes app script')
const input_title= document.getElementById('title-note')
const input_note= document.getElementById('note')
var btn_submit=document.getElementById('submit-note')
const btn_getNotes=document.getElementById('getnotes')
const div_notes=document.getElementById('data-notes')


btn_submit.addEventListener('click',function(e){
    const title=input_title.value;
    const data=input_note.value;
    const note={
        "title": title,
        "note": data
    }
    fetch('/notes', {
        method: 'post',
        headers: {
        'Content-Type': 'application/json;charset=utf-8'
      },
        body: JSON.stringify(note)
      }).then(function(response) {
        div_notes.innerHTML='<h3>Note is added sucessfully</h3>'
 
        //window.alert('Note is Added successfully')
       //  window.location="/notespage"
       if(response){
        return response.json();
        console.log(response.json());
       }
           
       

      })
        
})
btn_getNotes.addEventListener('click',function(e){
fetch('/notes',{
    method: 'get',
    headers: {
        'Content-Type': 'application/json;charset=utf-8'
      },
}).then(function(data){

data.json().then((data)=>{

var notes_data ={};
notes_data.notes = data;
var data=notes_data
console.log('data')
console.log(data)
var note_data=document.getElementById("note-test").innerHTML;
console.log('---data from html---)')
console.log("test"+note_data)
var tpt=Handlebars.compile(note_data)

var note_dt=tpt(data)
document.getElementById("notes").innerHTML=note_dt;

})
}).catch((error)=>{
    console.log(error)
})

})
<!DOCTYPE html>
<head>
<title>Notes App</title>
{{!-- <script src="https://twitter.github.io/typeahead.js/js/handlebars.js"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script> 
{{!-- <script src='../static/handlebars-v4.7.6.js'></script>  --}}
</head>

<body>
  <form>
 
    <label for="title" class='title-text'><b>Title</b></label>
    <input type="text" placeholder="Title for your notes" id="title-note" required>

  
    <input type="text" placeholder="Start typing....." id="note" required>

    <button type="button" id='submit-note'>send</button>
    <button type="button" id='getnotes'>Get notes</button>
    <div id='data-notes'></div>

<script type="text/x-handlebars-template" id="note-test">
{{#each notes}}
<div ({{this.title}}) class=title-template>
  <b>{{this.title}}</b>: {{note}}
  </div>
{{/each}}
</script>

<div id='notes'>

</div>

</form>

<link rel="stylesheet" type="text/css" href="../static/css/style.css">
<script src='../static/js/notes.js' ></script> 

</body>

</html>

Ответы [ 2 ]

0 голосов
/ 03 мая 2020

Я пытался передать файл html вместо hbs. Сейчас работает нормально. похоже, что рули не могут быть проанализированы в файлах на стороне сервера (hbd).

0 голосов
/ 30 апреля 2020

попробуйте после изменения. json на .lean -> return response.json(); на return response.lean();

...