0

ここでいくつかの例を読みましたが、まだ少し行き詰まっています。私は、このような形式のAPIからフィードを取得しています

{
total:123,
id: "1234",
results: [
           {
           id: "1234",
           name: "bobs market",
           phone: "123-456-7890",
           othervalue: "33333333",
           onemore: "get this"
           },
           {
           id: "1235",
           name: "jans market",
           phone: "123-456-7899",
           othervalue: "33333353",
           onemore: "get this one"
           }
         ]
}

$.getJSON 機能を使用して各レコードをループし、#bizresults の ID を持つ div 内に各ビジネスを表示して、結果の html が次のようになるようにしようとしています。

<div id="business">
      <h4><a href=#>Business Name</a></h4>
      <p id="phone">555-555-5555</p>
      <p id="adr">
      <span id="street-address">12 Main Street</span>
      <span id="locality">Sacramento</span>
      <span id="region">CA</span>
</div>

スクリプトで結果を取得しているようですが、Chrome 開発コンソールで結果を確認できますが、出力を div に取得できないようです。

私が@ Handlebars.jsを見た提案を取って**私はまだそこにいません-

<script id="biz_template" type="text/x-handlebars-template">

    <div id="businesses">
    {{#each jsonResult}}
    <a href=#><h4>{{name}}</a></h4>
    <p id="phone">{{phone}}</p>
    <p id="adr">
    <span id="street-address">{{address}}</span>
    <span id="locality">{{city}}</span>
    <span id="region">{{state}}</span>
    </p>
    {{/each}}
    </div>

  </script>




<script>
       var source = $("#biz_template").html();
       var template = Handlebars.compile(source);

var data = '{"totalCount":61,"impId":"17","jsonResult":[{"impId":"17","listingId":"94523","pageUrl":"/page/LA/new-orleans/ccs-coffee-house/17-94523.html","name":"CC's Coffee House","phone":"(504) 586-0278","address":"650 Poydras St","city":"New Orleans","state":"LA","latitude":"29.949339","longitude":"-90.070017"},{"impId":"17","listingId":"417428","pageUrl":"/page/LA/metairie/ccs-community-coffee-house/17-417428.html","name":"CC's Community Coffee House","phone":"(504) 831-1449","address":"701 Metairie Rd","city":"Metairie","state":"LA","latitude":"29.98763","longitude":"-90.130528"},{"impId":"17","listingId":"228835","pageUrl":"/page/LA/new-orleans/ccs-community-coffee-house/17-228835.html","name":"Cc's Community Coffee House","phone":"(504) 566-1863","address":"228 St Charles Av","city":"New Orleans","state":"LA","latitude":"29.951952","longitude":"-90.069885"}]}';

$("#biz").html(template(data));
 </script>

何かご意見は？

HTMLにbizのIDを持つdivがあります

4

2 に答える 2

1

プラグイン$.getJSONとハンドルバーを作成しました。これはその一部であり、基本的に必要なものはすべてです。必要に応じて、プラグイン全体を投稿できます。

ファイルまたはURLをハンドルバーに参照することを忘れないでください

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js" type="text/javascript"></script>

var container = $('#tweets'),
    template: $('#tweets-template').html()

$.getJSON(this.url, function(data) {
                    var tweets = $.map(data.results, function(tweet) {
                        return {
                            author: tweet.from_user,
                            tweet: tweet.text,
                            thumb: tweet.profile_image_url,
                            url: 'http://twitter.com/' + tweet.from_user + '/status/' + tweet.id_str
                        };
                    });

                    var templateHandlebars = Handlebars.compile(template);
                    container.append(templateHandlebars(tweets));
});


//this is the html and the template
<ul id="tweets">
        <script id="tweets-template" type="text/x-handlebars-template">
            {{#each this}}
                <li>
                    <img src={{thumb}} alt={{author}} />
                    <p><a href={{url}}>{{tweet}}</a></p>
                </li>
            {{/each}}
        </script>
</ul>
于 2013-01-05T20:50:46.177 に答える
1

ここでのタスクは、getJSON 成功関数でマークアップを作成することです。文字列を連結するか、ハンドルバー、JsRender、アンダースコアなどのテンプレート システムを使用して、これを行うことができます。双方向バインディングを探している場合は、Angular または Knockout を探してください。

于 2013-01-05T19:14:27.157 に答える