嵌套的“{{for}}”问题？ [js渲染]答案

【问题标题】：Nested "{{for}}" issue? [jsRender]嵌套的“{{for}}”问题？ [js渲染]
【发布时间】：2012-07-19 14:29:41
【问题描述】：

我正在尝试将模板与 jsRender 组合在一起，而不是使用我自己的版本，但是，我不断收到以下信息：“未捕获的 JsRender 错误：语法错误不匹配或缺少标签：“{{/for}}”在模板中：”后跟我的整个模板。

这是我的代码的截断版本，关于发生了什么有什么想法吗？还是只是嵌套的 for 循环？

<div class="page" id="{{:info.id+info.name}}">
    {{for sources}}
    <header class="feed-title">
        <div class="feed-title-content">
            <span class="feed-title-text">{{:title}}</span>
        </div>
    </header>
    <section class="row">
        <div class="scroll-left"></div>
        <div class="row-scroll">
            {{for articles}}

                          // An if, else and some standard content insertion stuff is/was here

            {{/for}}
        </div>
        <div class="scroll-right"></div>
    </section>
    {{/for}}
</div>

显示我的数组结构的 chrome 开发工具的屏幕截图：

展开视图的屏幕截图 1：

然后崩溃了：

关于发生了什么的任何想法？

编辑：忘了说，我是使用 John Papa 的code从外部文件加载的

编辑：演示和代码：

我的数组的 Chrome 开发工具输出：

Object
    info: Object
    sources: Array[1]
        0: Object
            articles: Array[7]
                0: Object
                1: Object
                2: Object
                3: Object
                4: Object
                5: Object
                6: Object
            link: "http://lifehacker.com"
            title: "Lifehacker"

演示：http://jsfiddle.net/SO_AMK/3J7AE/

一个有效的嵌套数组：

Object
    foo: "names"
    testData: Array[2]
        0: Object
            markup: "<span style='background: yellow'>John</span>"
            name: "John"
            secondary: Array[1]
                0: Object
                1: Object

演示：http://jsfiddle.net/SO_AMK/Vf8Bq/

【问题讨论】：

标签： jquery templates jsrender

【解决方案1】：

你是对的，问题似乎出在你的 JavaScript 对象上。我认为要循环的属性需要是数组而不是对象。 Your template works just fine 与您在 cmets 中提供的 jsfiddle 示例中的测试数据。

如果不是这样：您可以添加对象的 JSON 序列化吗？您的模板似乎有效：http://jsfiddle.net/6wcX8/1/

【讨论】：

但是，我采用了 John Papa 的 jsFiddle 之一并将其修改为使用嵌套循环：jsfiddle.net/SO_AMK/6wcX8 并且它可以工作
这就是我发布数组结构的原因，因为我认为可能就是这样。
好的，更新了我的错误答案。查看 Chrome 中的 vm 对象，主要区别似乎是 testData 和 secondary 都是数组。
好的，我有一个 each 循环来获取数据并以编程方式将信息添加到数组/对象中。然后，我将其存储在本地存储中以供离线使用 (JSON.stringify())。如何重新定义它以使其正常工作？
您能否展示一些代码，将数据添加到您的对象？我真的不明白为什么您在使用数组时遇到问题。序列化和反序列化数组没有问题。将obj.sources = []和每个来源的articles属性初始化为source.articles = []，然后将push你的数据放入其中。

【解决方案2】：

看看 jsfiddles，问题是上面代码中没有实际显示的部分中的标签，使用 {{if}} 和 {{else}}，没有使用正确的语法：

他们使用：

{{for articles}}
    {{if img === false }}
        ...
    {{/if}}
    {{else}}
        ...
    {{/else}}
{{/for}}

而不是

{{for articles}}
    {{if img === false }}
        ...
    {{else}}
         ...
    {{/if}}
{{/for}}

看到这个demo sample of {{if}} and {{each}} tags。

【讨论】：