初学者咨询：Nodejs中partial函数有迭代作用吗

初学者咨询：Nodejs中partial函数有迭代作用吗

大家好，我是初来CNode的菜鸟一枚，最近在学习《Node.js开发指南》一书的“片段视图”那一节时有些不解的地方。书上提到partial函数接受两个参数，如果传给第二个参数的是一个数组，那么其中每个元素依次被迭代应用到片段视图。也就是如果代码如下的话：

list.ejs:

<ul><%- partial('listitem', {items: [1, 2, 3]}) %></ul>

listitem.ejs:

<li><%= listitem %></li>

在运行了之后，浏览器里查看源码应该是<ul><li>1</li><li>2</li><li>3</li></ul>才对，但结果却是<ul><li>1,2,3</li></ul>，不知道是不是partial函数没有迭代效果，去EJS官网看了看貌似也是用for循环来实现迭代效果的，所以想问下大家： 1）partial函数有迭代效果的吗？ 2）有没有类似这种迭代效果的函数？

初学者一枚，还请大家指点一下迷津，感激不尽！


5 回复

初学者咨询：Nodejs中partial函数有迭代作用吗

大家好，我是初来CNode的菜鸟一枚，最近在学习《Node.js开发指南》一书的“片段视图”那一节时有些不解的地方。书上提到partial函数接受两个参数，如果传给第二个参数的是一个数组，那么其中每个元素依次被迭代应用到片段视图。也就是如果代码如下的话：

list.ejs:

<ul><%- partial('listitem', {items: [1, 2, 3]}) %></ul>

listitem.ejs:

<li><%= item %></li>

在运行了之后，浏览器里查看源码应该是<ul><li>1</li><li>2</li><li>3</li></ul>才对，但结果却是<ul><li>1,2,3</li></ul>，不知道是不是partial函数没有迭代效果，去EJS官网看了看貌似也是用for循环来实现迭代效果的，所以想问下大家：

  1. partial函数有迭代效果的吗？
  2. 有没有类似这种迭代效果的函数？

以下是一个简单的示例来解释如何正确使用partial函数并实现迭代效果：

示例代码

list.ejs:

<ul>
  <% items.forEach(function(item) { %>
    <%- partial('listitem', {item: item}) %>
  <% }) %>
</ul>

listitem.ejs:

<li><%= item %></li>

解释

  1. partial函数的作用：partial函数主要用于将一个模板片段重复应用于不同的数据。它本身并不直接支持迭代功能。

  2. 如何实现迭代效果：在list.ejs中，我们使用forEach方法遍历数组items，并将每个元素传递给partial函数。这样每次调用partial函数时，都会生成一个新的listitem片段。

通过这种方式，可以确保每个列表项都被单独处理并正确渲染为独立的<li>标签。希望这能解答你的疑惑，并帮助你更好地理解partial函数的使用方式。如果有任何问题或需要进一步的帮助，请随时提问！

初学者一枚，还请大家指点一下迷津，感激不尽！


初学者就开始整框架(express ejs)了，NB呀。

真是个初学者，绝不敢称NB。只是照着书上做的时候发现的一些问题而已，学完这本书还是得回到Node.js最基础的部分去入手，这本为数不多的中文书就当是小小的窥探一下Node.js啦。

请参照nodeclub开源代码！ index.html

<%- partial('tag/tag', tags) %>

tag/tag.html

<a class=tag_big  tag_id=<%= tag._id %>href='/tag/<%= tag.name %>>
	<%= tag.name %>
</a>

从你的描述来看，问题出在模板引擎的使用方式上。partial 函数本身并不具备迭代功能，它只是简单地渲染另一个模板片段。你需要在子模板（如 listitem.ejs）中自行处理迭代逻辑。

以下是具体的解决方案：

示例代码

list.ejs 文件

<ul>
    <% items.forEach(function(item) { %>
        &lt;%- partial('listitem', { listitem: item }) %&gt;
    <% }); %>
</ul>

listitem.ejs 文件

<li><%= listitem %></li>

解释

  1. 父模板 list.ejs 中的处理:

    • 使用 JavaScript 的 forEach 方法遍历 items 数组。
    • 对于数组中的每个元素，调用 partial 函数并传递当前元素作为变量 listitem。

  2. 子模板 listitem.ejs 中的处理:

    • 模板直接输出 listitem 变量的值，即当前数组元素。

通过这种方式，你可以达到期望的 HTML 输出结构：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

因此，partial 函数本身没有迭代效果，你需要在父模板中通过循环的方式手动调用 partial 函数来实现迭代效果。希望这能帮助你解决问题！

回到顶部