2

jqueryのgetJSONを使用してAPIを呼び出し、口ひげテンプレートを使用してデータをレンダリングする小さなページを作成しています（少なくともそれが計画です）。ただし、私のJSONにはノードルートがなく、適切な口ひげの仕組みを使用してJSON応答データをループすることができません。

//start
file : jsonresponse.jsonp

?([{"CountryIsoAlpha3Code":"AFG","CountryName":"Afghanistan"},
{"CountryIsoAlpha3Code":"ALA","CountryName":"Åland Islands"},
{"CountryIsoAlpha3Code":"ALB","CountryName":"Albania"}])
//end

//start
file: tmpl.mustache

<option value="{{CountryIsoAlpha3Code}}">{{CountryName}}</option>
//end

//start
file: render.js

$.getJSON(jsonresponse.jsonp, function(data) { 
   var tpl = tmpl.mustache,
   i=data.length,
   html = '';
     while(i--){
       html = html + mustache.render(tpl, data[i]);
     }

//end

これは完全に間違っていることに気づきました（テンプレートの使用法のみで、実際にデータとテンプレートを適切に渡していると仮定します）が、機能します。しかし、私が次のことをしたい場合はどうなりますか...どうすればいいですか！？：

//start
//file : daydreamer.mustache

<h1>This title is only awesome when it's rendered once</h1>
{{#}}  //no root node attempt at recursive templating rendering
     <option value="{{CountryIsoAlpha3Code}}">{{CountryName}}</option>
{{/}}

//end

これが不明な場合は、悪い質問が目の痛みであることを私に知らせてください。できるだけ早く編集していきます。ありがとう。

4

1 に答える 1

5

このアプリケーション/ユースケースで制御する部分に応じて、2つの可能な修正があります。JSONデータを変更してそのようなルートノードを含めるか、そのルートノードをデータに追加します。

口ひげテンプレートは、両方のソリューションで次のように変更する必要があります。

{{#options}}
    <option value="{{CountryIsoAlpha3Code}}">{{CountryName}}</option>
{{/options}}

ここで、サーバーまたは自分の側でデータを直接ラップするgetJSONと、2番目のソリューションの呼び出しは次のようになります（最初のソリューションでは、{options: data}ラッパーをちょうどに置き換えますdata）。そのAPIは他の誰かによって修正/義務付けられているため、サーバー側を制御できないと仮定して、2番目のものを使用します。

$.getJSON("jsonresponse.jsonp", function(data) { 
    var tpl = tmpl.mustache,
        html = '';

    html = mustache.render(tpl, {options: data});
}
于 2012-11-21T00:02:41.237 に答える