0

そのため、このコードで xml を解析していましたが、レビュー ノードを追加するまではすべて正常に機能していました。

$(document).ready(function generatexml(){
$.ajax({
                type: "GET",
                url: "data/concerts.xml",
                dataType: "xml",
                success: function(xml){
                $(xml).find("concert").each(function(){
                $('#concerten').append('<div id="tabel" onclick="navigate('+"'"+$(this).find('artist').text()+"'"+')"><div id="tabelimage"><img src="http://griekenland.mixxt.at/storage/images/events/0/0/0/00000000000000000000000000000.jpg"/></div>'
                +'<div id="tabelartist">'+$(this).find('artist').text()+'</div>'
                +'<div id="tabellocation">'+$(this).find('location').text()+'</div>'
                +'<div id="tabelqs">'+$(this).find('review').text()+'</div>'
                +'<div id="tabeldate">'+$(this).find('date').text()+'</div>'
                +'<div id="tabelurl"><a href="'+$(this).find('url').text()+'">'+$(this).find('url').text()+'</a></div>').trigger('create');             
                })
                }
                })
})

xml は次のようになります。

<?xml version="1.0"?>
<concerts>
<concert>
<artist>Sioen</artist>
<location>De Zwerver leffinge</location>
<date>24/03/2012</date>
<review>Met die woorden, op zelf getekende en verspreide flyers, riep Willis Earl Beal iedereen op hem te bellen om hem één van z’n liedjes te horen zingen</review>
<url>http://www.test.be</url>
</concert>
<concert>
<artist>Sioen</artist>
<location>De Zwerver leffinge</location>
<date>24/03/2012</date>
<review>Met die woorden, op zelf getekende en verspreide flyers, riep Willis Earl Beal iedereen op hem te bellen om hem één van z’n liedjes te horen zingen</review>
<url>http://www.test.be</url>
</concert>
</concerts>

解析できない理由がわかりません.xmlバリデーターを実行しましたが、firebugにjsエラーはありません。ノード内のテキストが長すぎる可能性はありますか (ただの勘です)、どうすればこれに対抗できますか?

どんな助けでも大歓迎です、Tyvm

トゥーン・ヴァン・ドーレン

4

1 に答える 1

1

特定の問題に対する直接的な回答ではありませんが、役立つと思います。

ここでテンプレートエンジンの使用を検討する必要があると思います。理由は次のとおりです。

  • レンダリング前にデータの準備/解析を強制します
  • すべてのパーツを個別に単体テストできます
  • コードの可読性と保守性を向上
  • 後で更新しやすい (たとえば、AJAX 要求で XML ではなく JSON を返すことにした場合)

コードに基づいて、JSBinで次の例を検討してください ( Mustacheテンプレート エンジンを使用していますが、他の多くのエンジンを見つけることができます)。

詳細は以下のとおりです。

1- テンプレートを定義する

<script id="concertsTpl" type="text/x-custom-tpl">
{{#concerts}}
  <div id="tabel" onclick="navigate('{{artist}}')">
    <div id="tabelimage">
      <img src="http://griekenland.mixxt.at/storage/images/events/0/0/0/00000000000000000000000000000.jpg">
    </div>
    <div id="tabelartist">{{artist}}</div>
    <div id="tabellocation">{{location}}</div>
    <div id="tabelqs">{{review}}</div>
    <div id="tabeldate">{{date}}</div>
    <div id="tabelurl">
      <a href="{{url}}">{{url}}</a>
    </div>
  </div>
{{/concerts}}
</script>

2- データを解析する関数を定義する

function parseConcertsData(data) {
  var concerts = [];

  $(data).find("concert").each(function(){
    var concert = {
        artist: $(this).find('artist').text(),
      location: $(this).find('location').text(),
        review: $(this).find('review').text(),
          date: $(this).find('date').text(),
           url: $(this).find('url').text()
    };
    concerts.push(concert);
  });
  return {concerts: concerts};
}

3- リクエストを送信し、結果を処理する

var jqXhr = $.ajax({
      type: 'get',
       url: "data/concerts.xml",
  dataType: 'xml'
});

jqXhr.done(function(xml){

  var concerts = parseConcertsData(xml),
      tpl = $('#concertsTpl').html(),
      rendered = Mustache.to_html(tpl, concerts);

  $('#concerten').append( rendered ).trigger('create');

}).fail(function(){
  alert('Something went wrong with the query');
});

この種のリファクタリングを使用すると、問題を簡単に見つけることができるはずです。

  • 問い合わせに対する応答はありますか?
  • 期待どおりのデータを取得していますか (つまり、応答は正しく解析されていますか)?
  • テンプレートのレンダリングは問題ありませんか?
  • レンダリングされたテンプレートはドキュメントに追加されていますか?

それが役に立てば幸い。

于 2012-04-29T14:30:51.120 に答える