node.js使用js获取和渲染数据驱动的部分的EJS模板

vatpfxk5  于 2023-06-29  发布在  Node.js
关注(0)|答案(1)|浏览(137)

我对部分音不是很熟悉,所以这可能不是正确的方法。这就是我想要做的。
有一个基本的索引页面,加载一个列表,让我们称之为配置。这些配置是从数据库中提取的,并使用基本的ejs语法呈现在索引视图上。

<ul>
    <% configs.forEach(function(obj) { %>
        <li onclick="configClickHandler('<%= obj.id %>')" class="configLink">
           Name: <%= obj.title %>
        </li>
    <% }); %>
</ul>

当我点击

  • 我对backed进行一个fetch调用,它返回一个JSON对象

我想使用该对象来更新UI并显示该对象的详细信息。
我知道我可以用JavaScript做到这一点,在一个函数中构建HTML,然后将其放置在页面上,但我想知道我是否可以利用EJS部分来做到这一点?
就像
<%- include('partials/config,{data:DATAFROMAPI})%>
就像是零件的React……
再次,我可能是错的,部分变量是被设计成这样使用的吗?有没有更好的方法来创建可重用的数据可绑定组件(而不是使用react)?

busg9geu

busg9geu1#

我不认为你会找到一个原生的ejs解决方案。ejs不会向客户端提供任何嵌入式语法,因此与像React这样的SPA不同,它不会在后台状态更改时触发重新渲染DOM。
此外,基本的html不会在渲染之间存储状态,除非你使用window.localStorage,所以假设你没有使用window.localStorage,那么你会希望避免触发重新渲染,否则你从数据库中提取的JSON将在每次点击时丢失,页面将不会呈现任何内容。
我建议在configClickHandler函数提取JSON数据后,将子元素节点追加到父节点。
在不知道完整实现的情况下,它看起来像这样:

<script>
 const configClickHandler = (id) => {
    const some_json_data = someOperation();
    const li_node = document.createElement("li");
    const text = document.createTextNode(JSON.stringify(some_json_data));  
    li_node.appendChild(text);  
    document.getElementById(id).appendChild(li_node);
 }
</script>

<ul>
    <% configs.forEach(function(obj) { %>
        <li id=<%= obj.id %> onclick="configClickHandler('<%= obj.id %>')" class="configLink">
           Name: <%= obj.title %>
        </li>
        
    <% }); %>
</ul>

我添加了一个id属性,但您可以使用一大堆方法来query DOM nodes

相关问题