Question

我发现了这个post，但我需要javascript中的等价物。我在一个包含字符串数组值的选项的多字段中有一个选择框。

JCR结构

parent.location.reload( true );

我用js

循环遍历多场

JS档案

<multiField
    fieldLabel="Fields"
    jcr:primaryType="nt:unstructured"
    cardinality="5"
    sling:resourceType="/apps/.../multifield"
    buttonName="Add Field"
    slideStyle="border">
    <field
        jcr:primaryType="nt:unstructured"
        name="./fields"
        sling:resourceType="granite/ui/components/foundation/form/fieldset">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <selectBox
                        fieldLabel="Select Box"
                        jcr:primaryType="cq:Widget"
                        name="./select"
                        sling:resourceType="granite/ui/components/foundation/form/select">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <option1
                                jcr:primaryType="nt:unstructured"
                                text="Option 1"
                                value="['val1':'value 1','val2':'value 2','val3':'value 3']"/>
                            <option2
                                jcr:primaryType="nt:unstructured"
                                text="Option 2"
                                value="['val1':'value 1','val2':'value 2','val3':'value 3']"/>                                                                      
                        </items>
                    </selectBox>
                </items>
            </column>
        </items>
    </field>
</multiField>

HTML文件

"use strict";
use(function() {
    return {
        data: JSON.parse(this.value)
    };
});

这是我被卡住的地方。我似乎无法循环遍历数组。我得到<div data-sly-list.field="${properties['fields']}" data-sly-unwrap> <div data-sly-use.json="${'jsfile.js' @ value=field}" data-sly-unwrap> <div data-sly-list.input="${json.data.select}" data-sly-unwrap> <div data-sly-list.input="${json.data.inputField}" data-sly-unwrap> <div data-sly-use.attr="${'multivalues.js' @ value=input}" data-sly-unwrap> ${attr.data} </div> </div> </div> </div> </div>

multivalues.js

"[Ljava.lang.String;@6d100000"

Answer 1

"['val1':'value 1','val2':'value 2','val3':'value 3']"不是格式正确的数组。以下是带有字符串的数组和带对象的数组的示例：

return {
    dataString : JSON.parse('["alpha", "bravo"]'),
    dataObject : JSON.parse('[{"name" : "alpha", "age" : 20}, {"name" : "bravo", "age" : 25}]')
};

然后你可以遍历它们：

<div data-sly-use.logic="jsfile.js">
    <div data-sly-list.input="${logic.dataString}" data-sly-unwrap>
        <p>${input}</p>
    </div>

    <div data-sly-list.input="${logic.dataObject}" data-sly-unwrap>
        <p>${input.name}</p>
        <p>${input.age}</p>
    </div>
</div>

使用javascript从node属性获取数组值

1 个答案: