2016-06-20 12 views
0

このMeteorクライアント・コードは、app/publicディレクトリーに存在するファイルが存在するかどうかを検査するときにtrueを返しません。Meteorパブリック・ディレクトリーにファイルが存在していないか確認してください。

以下のようなブラウザのコンソールで使用する場合、なぜ、今それを修正するために、それはundefined utility.isFileExist('http://localhost:3000/abc.gif')または
utility.isFileExist('http://localhost:3000/public/abc.gif')

を返しますか?コメント あたりとして感謝

//client/lib.js 

utility = (function() { 
    return { 
    isFileExist: (url) => { 
     $.get(url) 
     .done(function() { 
      return true; 
     }).fail(function() { 
      return false; 
     }) 
    } 
    } 
})(); 

編集まず、のは間違っているかを把握しましょう

Template.checks.helpers({ 
    'values': function() { 
    let result = []; 
    let checks = Session.get('items'); 
    checks.forEach((item) => { 
     let url = item.replace(/[^0-9a-zA-Z]/g, ''); 

     $.get(url + '.giiif') //<----- files do not exist 
     .done(function() { 
      console.log(`exists`); //<----- yet this prints out 
     }).fail(function() { 
      console.log(`does not exist`); //<--- expected this instead 
     }); 

     result.push({ 
     label: item, 
     image: url 
     }); 
    }); 
    return result; 
    } 
}); 
+0

構文上の砂糖と(不要な)IIFEで囲んでも、XHRが非同期でエスケープすることはできません。答えを処理するには、コールバックが必要です(または、async/awaitを使用してES5にコンパイルします)。 – MasterAM

+0

@MasterAM例を挙げてください。 Thx –

+0

jQuery(MeteorにもHTTPパッケージがあります)を使いたい場合は、コードで、 'done | fail'(または' always'代わりに)コールバックでロジックの流れを続ける必要があります。結果をすぐに(または同期構文で)ES5で取得することはできません。 – MasterAM

答えて

1

このコードを参照してください:あなたが投稿

utilityコードは動作しません。 XHRは非同期であるため、ES5での割り当てなどの同期操作を使用して値を取得することはできません。

定義を取り巻くIIFEは冗長です。 isFileExistメソッド自体は何も返しません。返された場合、それはリクエストのjqXHRオブジェクトになります。これは呼び出し時に探しているデータを提供しません。

もう1つの問題は、一般的に、Meteorは別の応答に特にバインドされていないURLに対してページのHTMLで応答することです。これは、リクエストが技術的に成功することを意味します(200 OKレスポンスコード、期待したレスポンスではない)。したがって、failコールバックは呼び出されません。

レスポンスcontent-typeを使用すると、結果がファイルであるかHTMLドキュメントであるかを知ることができます。スタンドアロンで動作しますが、そのままテンプレートヘルパーでそれを使用することはできません

utility = { 
    doesFileExist(name, cb) { 
    $.get(name).done((data, status, request) => { 
     const isHtml = request.getResponseHeader('content-type') === 'text/html; charset=utf-8'; 
     cb(!isHtml); 
    }) 
    } 
}; 


// call it with file name and a callback 
utility.doesFileExist('foo.png', (doesExist) => { 
    if (!doesExist) { 
    // do something if file does not exist 
    } 
}); 

あなたのような何かを行うことができます。要求の状態を追跡するReactiveDictを使用することができますが、コードには多くの複雑さが加わります。

もう1つの欠点は、チェックするファイルごとに余分な時間をサーバーに呼び出すことです。


いくつかの選択肢

すべて<img>タグはalt属性を持つ必要があります。画像が欠けている場合は、altのテキストが表示されますが、これはあまり美的ではありません。

幸いなことに、タグには画像を読み込めない場合にトリガーされるイベントがありますので、画像を非表示にしたり、他の操作を行うことができます。サイドノートでは

Template.foo.events({ 
    'error img': function(e) { 
    $(e.target).hide(); //or something else 
    } 
}); 

、あなたは彼らが静的にコピーされ、コンパイル時に提供される画像は、 publicフォルダ内に存在するかを知る必要があります。

質問で達成したいことを説明することが重要です。単に「XYをどうやってやるの?」という質問だけではありません。 (答えの最初の部分はあなたのケースではあまり役に立ちません)。

関連する問題