2012-03-04 12 views
1

繰り返しを避けるために、私はサーバ側とクライアント側のテンプレート作成のためにひげをつけようとしています。私は次のようなテンプレートを持っています:動的にロードされたひげそりテンプレートの一部を取り出すためにjQueryを使うにはどうすればいいですか?

<html> 
<head>...</head> 
<body> 
    <table> 
    <tbody id="#this"> 
     {{rows}} 
     <tr>{{row}}<tr> 
     {{/rows}} 
    </tbody> 
    </table> 
</body> 
</html> 

これは私のサーバー側のテンプレートに最適です。しかし、クライアント側では、私はいくつかの問題を抱えています。私は正常にajaxを使用してテンプレートを読み込むことができますが、私はすべてのテーブルの行を更新する必要はありません。

$(function() { 
    var template; 
    $.ajax('templates/thetemplate.mustache', { 
     success : function (data) { 
      template = $('#this', data).html(); 
     }, 
     dataType : 'html' 
    }); 
}); 

私はしかし#this要素の内容を取得するためにjQueryの上で使用する場合は、それらの間の<tr>{{row}}</tr>が正常に返されながら、{{rows}}{{/rows}}ラインが、結果から削除されます。どのようにコンテンツ全体を入手できますか?

同じ結果を返す$('#this', data).contents();と、空の文字列を返す$('#this', data).val();を試しました。代わりに$(data).find('#this')を使用すると、同じ3つの結果が得られます。私はまた、明らかな効果なしで'text'にajax呼び出しのdataTypeを設定しようとしました。

partialsを使って私が望むもの(クライアントとサーバー側のテンプレートの部分を複製しない)を実現でき、実際にはそれ以上のテンプレートの転送を避けるという追加のボーナスクライアントにそれを投げ捨てる必要がありますが、それは私の質問には答えません。最初

おかげ

+0

私はまたテンプレート全体を使い、Mustacheレンダリング後にjQueryの選択をすることもできます。 var rendered = Mustache.render(wholetemplate、data); $( '#this').html($( '#this'、rendered).html()); しかし、私はむしろちょうど私が必要とするテンプレートの部分を得るだろう。 – coastwise

答えて

0

は問題がすでにDOMフラグメントに変換するには、ブラウザのHTMLパーサを経由してdataを送信$('#this', data)、で発生しています。エラーパーセンテージであるため、HTMLパーサーはテンプレートでできることを行いますが、テンプレート自体は有効なHTMLではないため、必要なものではありません。このため、$('#this', data).anythingYouLike()または$(data).anythingYouLike()は機能しません。

ブラウザのHTMLパーサーに送信する前にHTMLを有効にする必要があるため、有効なHTMLを$(renderedHTML)式でブラウザに送信する前に、Mustacheレンダリングを実行する以外の方法はありません。このことを念頭に置いて、制約付き

、イベントの順序について2つの現実的なオプションがあります:

  • ストリップは、口ひげが$tbody = $(renderedHTML)、その後、レンダリング、ダウンdataだけ<tbody ...>...</tbody>( 正規表現で)へ。
  • 口ひげは、$tbody = $(renderedHTML).find('tbody')

限り、私は承知している、いずれかのアプローチが動作するよう、フルでdataをレンダリングします。どちらの場合でも、jQueryオブジェクト$tbodyが作成されます。このノードには、挿入されたtbodyノードが含まれており、$tbody.appendTo($('#myTable'))などでDOMに挿入できます。

0

を(滑らかなソリューションが高く評価されてカントー)、テンプレートは、良いテーブルの構造(クーゼの、それはテンプレートだ)あなたは$(データ)を行った後、それは良いのテーブルになり、ものではありませんこのように:

[" {{rows}} {{row}} {{/rows}} ", <table>​…​</table>​] 

{{行}}テーブル要素ではないので、あなたは$( '#この'、データ)の.html()で欲しいものを得ることができません。

私のソリューション

data.replace(/\n/g, '').match(/<tbody id="#this">(.*)<\/tbody>/g)[0] 
関連する問題