使用 jQuery 解析 xml 模板

Posted 2023-05-09

【中文标题】使用 jQuery 解析 xml 模板

【英文标题】：Parsing an xml template using jQuery

【发布时间】：2013-08-15 17:44:48

【问题描述】：

所以我有一个类似模板的脚本，我试图用 jQuery 解析它。问题是我想用数据替换某些标签，这通常没问题，但我想循环对象属性，这使得它变得更加困难。

我想尽可能少地依赖外部库，所以这里只使用 jQuery。我知道 Angular 在这里可能会有所帮助，但我还不知道。

模板代码如下所示：

<?xml version="1.0" ?>
<div id="test">
    <each obj="list">
        <div class="listdiv">
            <span><value>thing</value></span>
            <span><value>thing2</value></span>
            <span><value>thing3</value></span>
            <div>
                <each obj="moreStuff">
                    <span>blah: <value>blah</value></span>
                    <span>foo: <value>foo</value></span>
                </each>
            </div>
        </div>
    </each>
</div>

我想传入以下 JSON 对象：

    list: [
         thing: 3, thing2: 4, thing3: 5, moreStuff: [blah:1, foo:2,blah:4, foo:6] ,
         thing: 1, thing2: 1, thing3: 2, moreStuff: [blah:4, foo:6] 
    ]

我想要的结果是：

<div id="test">
    <div class="listdiv">
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <div>
            <span>blah: 1</span>
            <span>foo: 2</span>
            <span>blah: 4</span>
            <span>foo: 6</span>
        </div>
    </div>
    <div class="listdiv">
        <span>1</span>
        <span>1</span>
        <span>2</span>
        <div>
            <span>blah: 4</span>
            <span>foo: 6</span>
        </div>
    </div>
</div>

我想让它与正则表达式一起工作，但当然它与 DOM 操作一起更干净，而且这样做也更具可扩展性。引起麻烦的是<each> 标签的递归性质以及<value> 标签必须从其父标签获取数据这一事实。

我已经尝试了很多方法来做到这一点，但每次我遇到递归问题（无限递归，我无法让它替换东西）或者它无法正确提取数据。有没有办法很好地做到这一点？

【问题讨论】：

使用$.parseXML()，是吗？

@TimDown：它是通过$.ajax 请求进来的，但是是的，它已经被解析了

【参考方案1】：

这些jQuery插件你试过了吗

http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-an-introduction-to-jquery-templating/

https://github.com/trix/nano

http://knockoutjs.com/documentation/template-binding.html

http://www.jsviews.com/#samples/jsr/converters

【讨论】：

我想第一个会很好。但是，我试图在没有任何外部库的情况下做到这一点，因为我的功能要求非常低。也就是说，如果没有简单的方法来做到这一点（上面这些东西实际上是我现在所需要的），那么我可能会使用其中一个库。我只是想尽量减少依赖。