1

私は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]

これを解決できる唯一の方法は、テンプレートにルートノードを含めることですが、jQueryが適切に機能しないという理由だけで、無意味な非セマンティックマークアップを追加するのは好きではありません。

マークアップを変更する代わりに、これをプログラムで解決するにはどうすればよいですか。

4

2 に答える 2

1

実際、 jQueryオブジェクトの両方の要素を操作し.find ますfindが、それらの子孫のみを操作します。あなたが欲しいのは.filter：

var x = $html.filter('ul');
于 2012-05-19T18:11:19.260 に答える
1

次のユーザーが使用できます。

$html.filter('ul');

基調：


  • filterは、すでに選択されている要素の特定のサブセット（0個以上）を選択します。


  • findは、すでに選択されている要素の子孫である（0個以上の）要素のセットを選択します。

こちらでも確認できます

于 2012-05-19T18:11:55.750 に答える