XTemplate奇怪行爲

Question

爲什麼這個示例在使用雙引號中的字符串構建XTemplate時失敗，同樣的例子在單引號中定義字符串時工作。該代碼只是無聲地死去

var tplData = [{ // 1 
    color : "#FFE9E9", 
    name : 'Naomi White', 
    age : 25, 
    dob : '03/17/84', 
    cars : ['Jetta', 'Camry', 'S2000'] 
    },{ 
    color : "#E9E9FF", 
    name : 'John Smith', 
    age : 20, 
    dob : '10/20/89', 
    cars : ['Civic', 'Accord', 'Camry'] 
}]; 
var myTpl = new Ext.XTemplate(// 2 
    "<tpl for='.'>", // 3 
    "<div style='background-color: {color}; margin: 10px;'>", 
    "<b> Name :</b> {name}<br />", 
    "<b> Age :</b> {age}<br />", 
    "<b> DOB :</b> {dob}<br />", 
    "</div>", 
    "</tpl>" 
); 
myTpl.compile(); 
myTpl.append(document.body, tplData); 

單引號字符串的相同示例。

var tplData = [{ // 1 
    color : "#FFE9E9", 
    name : 'Naomi White', 
    age : 25, 
    dob : '03/17/84', 
    cars : ['Jetta', 'Camry', 'S2000'] 
    },{ 
    color : "#E9E9FF", 
    name : 'John Smith', 
    age : 20, 
    dob : '10/20/89', 
    cars : ['Civic', 'Accord', 'Camry'] 
}]; 
var myTpl = new Ext.XTemplate(// 2 
    '<tpl for=".">', // 3 
    '<div style="background-color: {color}; margin: 10px;">', 
    '<b> Name :</b> {name}<br />', 
    '<b> Age :</b> {age}<br />', 
    '<b> DOB :</b> {dob}<br />', 
    '</div>', 
    '</tpl>' 
); 
myTpl.compile(); 
myTpl.append(document.body, tplData);  

Answer 1

我想它並沒有明確指出在XTemplate運算符中需要雙引號，但所有的例子和文檔都使用它們並且它被推斷出來。這應該明確說明。

第一個代碼塊中唯一的問題是"<tpl for='.'>",行。雙引號在運算符中是必需的，所以如果你喜歡在你的模板字符串周圍使用雙引號，你必須像這樣逃避任何運算符："<tpl for=\".\">",或者只是使用單引號字符串來讓你的生活更輕鬆。

順便說一句，你可以驗證這是通過在XTemplate看代碼的要求：

nameRe = /^<tpl\b[^>]*?for="(.*?)"/, 

正如你所看到的，正則表達式明確預計雙引號for運營商。