帶有根級節點的模板

我一直在js中試驗模板，並遇到了一個非常酷的問題。假設你有一個句柄模板。然後編譯它，並將其輸出帶有根級節點的模板

var template = 
    '<h1>Hello</h1>' + 
    '<ul>' + 
    '<li>{{name}}</li>' + 
    '<li>{{address}}</li>' + 
    '<li>{{phone}}</li>' + 
    '</ul>'; 

var html = Handbars.compile(template)(
    {name: 'Austin', address: '42nd St.' phone: '(123) 456-7890'} 
); 

// Results in 
console.log(html); 
=> <h1>Hello</h1> 
    <ul> 
    <li>Austin</li> 
    <li>42nd St.</li> 
    <li>(123) 456-7890</li> 
    </ul>

現在說你想一個jQuery對象和行爲上的它也許找到了UL

var $html = $(html) 
var x = $html.find('ul'); \\ Or 
var y = $('ul', $html) 

console.log(x); 
=> [] 

conosle.log(y); 
=> 

console.log($html) 
=> [<h1>Hello</h1>, <ul>...</ul>]

什麼這顯示是當你jQueryify的字符串不包含根節點你節點

的陣列和只發現作用於$html[0]

我已經能夠解決這個問題的唯一辦法是包括無根de在我的模板中，但我不喜歡僅僅因爲jQuery不會很好而添加無意義的非語義標記。

如何以編程方式解決此問題而不是修改標記。

來源

2012-05-19 austinbv

事實上，.find確實對jQuery對象的兩個元素進行操作，但只find是他們的後裔。你想要的是.filter：

var x = $html.filter('ul');

來源

2012-05-19 18:11:19 Ryan

您可以將用戶：

$html.filter('ul');

主題：

過濾器將選擇的已
的某個子集（零個或多個）選定的元素。
find將選擇一組（0個或更多）元素，這些元素是已選元素的後代
。

您還可以檢查here

來源

2012-05-19 18:11:55 thecodeparadox

帶有根級節點的模板

回答

相關問題