2

非常に単純なWebアプリケーションに2つのファイルがあります

1 つ目は標準の index.html で、次のようになります。

<body>
<div id="add-stuff"></div>
<script id="the-template" type="text/x-handlebars-template" src="some-template.erb.html"></script>
<script type="text/javascript">
  var data = [];
  var source = $("#the-template").html();
  var template = Handlebars.compile(source);
  $('#add-stuff').html(template(data));
</script>
</body>

2 番目は私のハンドルバー テンプレート「some-template.erb.html」で、以下のようになります。

<table>
{{#each item}}
<tr><td>{{ item.name }}</td></tr>
{{/each}
</table>

上記のインライン JavaScript の問題は、「.html()」部分を実行しようとすると、常に空の文字列が返されることです (erb.html ファイルでリンクしているため)。

$.ajax を使用してテンプレートを取得する場合にこれを達成できる回避策を見つけましたが、上記のようなものを好むでしょう (したがって、ネストされた jQuery コールバックなしでテンプレート クライアント側を含めることができます)。 .

これは可能ですか？そうでない場合、$.ajax ベースのアプローチを改善するにはどうすればよいですか?

** 機能する ajax ベースのアプローチを以下に示します **

<body>
<div id="add-stuff"></div>
<script type="text/javascript">
$.ajax({
  url: 'some-template.erb.html',
  cache: true,
  success: function (source) {
    var data = [];
    var template = Handlebars.compile(source);
    $('#add-stuff').html(template(data));
  }
});
</script>
</body>

$ .ajaxのバージョンをもう少し詳しく示した stackoverflow の質問へのリンクを次に示します。

4

1 に答える 1