Perficient AEM 知识点 Feb/11

currentNode.Parent.path	HTL 获取当前节点的父节点路径
${varChoice ? var1 : var2}	三目运算符
document.getElementById(“id”)	通过Id获取DOM节点
sly data-sly-repeat.item	循环迭代–可以是content的Json/也可以是注入的Java
<input type=“hidden” id=“str1” value=""	给input一个Id并隐藏起来，JS就可以取到值

• 如何获取fileupload通过url上传的图片，图片以二进制形式存在content节点下
• Javascript实现轮播图片

原生JS实现点击按钮切换图片

<img border="0" alt="XXX" src="C:\Users\Public\Pictures\Sample Pictures\2018-lids-hero-new-lg.jpg" id="bbb"/>
<input type="button" value="点击切换" onclick="changeImg();"/>

<script>
	function changeImg() {
	    var obj = document.getElementById("bbb");   
		//alert(obj.getAttribute("src"));
	    if (obj.getAttribute("src") == "C:\\Users\\Public\\Pictures\\Sample Pictures\\2018-lids-hero-new-lg.jpg") {
	        obj.setAttribute("src", "C:\\Users\\Public\\Pictures\\Sample Pictures\\hero-pd-banners-4.jpg");     
	    } else { 
	        obj.setAttribute("src", "C:\\Users\\Public\\Pictures\\Sample Pictures\\2018-lids-hero-new-lg.jpg"); 
	    }
</script>

obj.getAttribute(“src”)	得到对象的src
C:\Users\Public\Pictures\Sample Pictures\	路径要加两个反斜杠转义

原生JS将AEM_JSON字符串转为JSON对象

• 从multiFiledq取到的JSON字符串如下
  {
  “hero_name”: “Perficient Trusted to Deliver DPA”,
  “hero_picture”: “/content/dam/PeficientDigit/hero-insights-lg.jpg”,
  “hero_tip”: “Named a “Strong Performer” in the Forrester Wave”,
  “hero_button_text”: “See Why”,
  “hero_button_url”: “https://www.baidu.com/”
  }，
  {
  “hero_name”: “Your Brand is Made of Moments”,
  “hero_picture”: “/content/dam/PeficientDigit/hero-pd-banners-4.jpg”,
  “hero_tip”: “Because great brands are the sum of every great customer moment.”,
  “hero_button_text”: “Learn More About Perficient Digital”,
  “hero_button_url”: “https://www.perficientdigital.com/”
  }

• HTL代码

<input type="hidden" id="str1" value=${properties.hero_block} />

<script>
    var json_txt=document.getElementById("str1").value;
	var str_obj="{ \"hero_block\" : [" +json_txt+ "]}";
	console.log(str_obj);

	var obj = eval ("(" + str_obj + ")");
    console.log(json_txt);
    alert(obj.hero_block[0].hero_name);
</script>

var str_obj="{ “hero_block” : [" +json_txt+ “]}”;	字符串还要+对象名才能变成JSON对象
符串内部既包含’又包含"	用转义字符\来标识