javascript - 循环遍历数组并在 XTempate 内执行语句

Question

我有一个自定义组件，有这样一个商店:

"store":{
    "fields":["name"],
    "data":[{
        "id":"1","name":"John","checked":"truec","tools":["user","doc"]
     },{
        "id":"2","name":"Jack","checked":"false","tools":["user"]
     }]
}

我有一个模板，我在自定义 Ext.ux.CheckList 中使用它。它工作得很好，除了一件小事 - 我不知道如何循环 tools 数组。这就是我现在拥有的:

'<tpl for="tools">',
 // if (curValue == "user") '<div>Value 1</div>'
 // else if (curValue == "doc") '<div>Value 2</div>'           
'</tpl>'

我见过this和 this示例，但它们并不能解决我的问题。 如您所见，我想在循环内使用 tools 值:

if (curValue == "user") '<div>Value 1</div>'
else if (curValue == "doc") '<div>Value 2</div>'

但我不知道如何实现这一点。

Answer 1

迭代平面数组时当前索引处的值可以通过标记中的“{.}”和条件中的“values”属性来访问。

Sencha Fiddle: An Example of Iterating Through a Flat Array

var template = new Ext.XTemplate(
    '<tpl for=".">',
        '<p>{name}</p>',
        '<tpl for="tags">',
            '<tpl if="values === \'user\'">',
                '<p>{.}</p>',
            '<tpl elseif="values === \'doc\'">',
                '<pre>{.}</pre>',
            '</tpl>',
        '</tpl>',
        '<br>',
    '</tpl>'
);

https://www.sencha.com/forum/showthread.php?320083 http://docs.sencha.com/extjs/6.2.0/classic/Ext.XTemplate.html