｛｛#each｝｝未执行.Handlebars.compile(templateSource)工作不正常

Question

这是我的advice.hbs文件：

<ul class="adviceParent">
<li>Dummy text</li>
{{#each slip}}
<li>{{this.id}}: {{this.advice}}</li>
{{/each}}
</ul>

这是我的app.js逻辑：

const randomAdviceURL = `https://api.adviceslip.com/advice`;
const searchAdviceURL = `https://api.adviceslip.com/advice/search/`;
const htmlSelectors = {
rndAdviceBtn: () => document.querySelector('header > button[name="adviceBtn"]'),
searchBtn: () => document.querySelector('header > button[name="searchBtn"]'),
searchInput: () => document.querySelector('header > input[type="search"]'),

adviceParentUL: () => document.querySelector('.adviceParent'),
adviceWrapper: () => document.querySelector('.adviceWrapper')
};
htmlSelectors['rndAdviceBtn']().addEventListener('click', getRandomAdvice);
// htmlSelectors['searchBtn']().addEventListener('click', searchForAdvice);
function getRandomAdvice(){
Promise.all(
[
fetchURL(randomAdviceURL),
getTemplate('./templates/advice.hbs')
]
)
.then(renderOnScreen)
.catch(errorHandler);
}
function fetchURL(url){
return fetch(url).then(jsonMiddleware);
}
function renderOnScreen([data, templateSource]){
// console.log(templateSource); // FINE
// console.log(data.slip); // FINE
// console.log(Handlebars); // FINE
let template = Handlebars.compile(templateSource);
console.log(template);
const htmlResult = template(data.slip);
// console.log(htmlResult);   
htmlSelectors['adviceWrapper']().innerHTML = htmlResult;
}

function getTemplate(templateLocation){
return fetch(templateLocation).then(response => response.text());
}

function errorHandler(error){
console.dir(error);
}
function jsonMiddleware(response){
return response.json();
}

一切都很好，但我认为车把的编制不正确。

const template = Handlebars.compile(templateSource)

当我控制台.log(模板(我得到这个：ƒe(a，b({返回f||(f=d(((，f.call(this，a，b

它在advice.hbs中呈现硬编码的东西，但不是我传递的对象。

Answer 1

我传递的是一个Object，而不是一个对象数组。。htmlSelectors['adviceWrapper']().innerHTML = template({slip: [data.slip]});