在客户端的AJAX调用中渲染Nunjucks宏

Question

我正在尝试使用AJAX(我也在使用Eleventy、Nunjucks和jQuery(在前端呈现JSON文件中的数据，使用Nunjucks宏(我已经创建了(来呈现返回的信息，而不是重新创建整个组件，这将节省大量的头痛和时间(这也将节省未来的时间和精力，因为使用的代码不必编辑两次(。

以下是创建JSON数据的代码：

// AJAX Call for Posts
config.addCollection("post", async function (collectionApi) {
// get unsorted items 
let allPosts = await collectionApi.getFilteredByTag("post");
// Loop through and only get the data you need from each post 
let curatedPostData = allPosts.map(post => {
return {
title: post.data.title,
description: post.data.description,
image: post.data.image,
url: post.url
}
});
// Filter out any null values 
curatedPostData = curatedPostData.filter(post => post);
// Create a new file in your project 
fs.writeFileSync("_data/ajax-list.json", JSON.stringify(curatedPostData))
});

理想情况下，这将适用于AJAX调用，但目前不是：

$("#showMorePostsButton").click(function(){
$.ajax({url: "/js/posts-list.json", success: function(result){
// Output results from AJAX call
$("#displayPosts").html( 
// Import the Nunjucks macro
{% from 'components/cards/postCard.njk' import postCard %}
// Use the macro with information from AJAX call
{{ postCard(postTitle = title, postDescription = description, postImage = image) }}
);
}});
});

有人知道如何让这个片段发挥作用，并在前端使用Nunjucks宏与Eleventy、Javascript或Nunjucks本身配合使用吗？

任何和所有的建议都非常感谢，谢谢

Answer 1

您可以使用js数据文件从api加载数据。