Angular'的纯javascript/jquery解决方案；s'；ng重复'；具有数据属性的函数？

我正在尝试创建一个类似Angular JS的

ng repeat

的自定义repeater函数来迭代数据。我想纯粹用javascript/jquery来实现这一点，并利用html

数据属性

例如，假设我有这个html

    <tr data-repeat="datas">
      <td data-repeat-value="data.name">--</td>
      <td data-repeat-value="data.email">--</td>
    </tr>

--
--

我想创建一个足够智能的函数，以查看此html并映射它需要的

和

，并正确地输出数据

如果没有数据属性，js解决方案看起来是这样的

    ${datas.map(data => 
        `<tr>
            <td>${data.name}</td>
            <td>${data.email}</td>
        </tr>`).join("")
    }`;

${datas.map（数据=>
`
${data.name}
${data.email}
`).join（“”）
}`;

但是如何编写js来利用

数据属性

我得到了一个显示不带

数据属性的工作版本

，以及带

数据属性的非工作版本

任何帮助或指导都将不胜感激

以下是解决方案：

getApiData（url，函数（apidata）{
const$template=$（“[data repeat new]”）；
const$container=$template.parent（）；
$template.remove（）；
$container.append(
apidata.map（数据=>{
const$snippet=$template.clone（true）；
$snippet.find（“[data repeat value new]”）。每个（（i，el）=>{
$（el）.text（eval（$（el）.data（'repeat-value-new'））；
});
返回$snippet；
})
);
});

完整的示例如下：（唯一的更改在

//不工作

块中）

它的作用是：

• 查找将作为模板的DOM片段（与

  [数据重复新建]

  选择器匹配的片段）
• 存储对该片段父元素的引用——我们将在其中插入新内容的容器
• 删除该片段，因为我们不希望在最终输出中看到模板
• 对于每个数据元素，它执行以下操作：
  • 克隆模板
  • 搜索需要插入值的所有节点（即与

    [数据重复值新建]

    选择器匹配的节点）
  • 对于每一个这样的节点，它都会用计算过的表达式替换节点的内容（表达式来自

    数据repeat value new

    属性的值，我们在

    eval

    的上下文中有

    数据

    变量，所以，一切正常）
• 之后，所有这些克隆的模板都附加到容器中

该

eval

呼叫可能看起来很危险，因此：

• 您可以制作简单的表达式解析器，将可能的表达式简化为JS的某些子集，例如，它可能只能从固定数组中获取元素（即

  data.property

  或

  data.property[0]

  ）
• 或者您可以保持原样，因为此评估发生在客户端，代码源是DOM节点——若攻击者可以在您的DOM中设置任意值，他可能也可以执行任何其他代码

还有一个注释是关于

data repeat new

的值：您在代码中获得API数据，但从未分配它，因此，我不确定如何解释该属性的值。一种方法是提供一些数据存储库，其中有带名称的数组，如下所示：

const repo={
数据1:[{id:'rec1'}，{id:'rec2'}，{id:'rec3'}]
};

然后在代码中可以执行以下操作：

const$template=$（“[data repeat new]”）；
const$container=$template.parent（）；
$template.remove（）；
const data=repo[$template.data（'repeat-new'）；
$container.append(
data.map（数据=>{
const$snippet=$template.clone（true）；
$snippet.find（“[data repeat value new]”）。每个（（i，el）=>{
$（el）.text（eval（$（el）.data（'repeat-value-new'））；
});
返回$snippet；
})
);

这太棒了！非常感谢你在这方面的帮助。我真的很喜欢你的解决方案，我也很欣赏它的功能。还有一件事@alx，如果我想在同一页的多个地方使用它呢？我更新了，向大家展示了我的意思，最后一部分——“一种方法是提供一些数据存储库”——正是关于这一点。你需要帮忙吗？哦，我明白你的意思。我可能会想出来，我只需要仔细看看你的解决方案。我在考虑是否可能使

data repeat=“repo”

（或报价单中的任何内容）也成为唯一标识符。这里的UI家伙哈哈。。我对数据很不了解，但我正在慢慢学习——试试看，因为人们就是通过尝试来学习新事物的。如果你卡住了，请告诉我。