sencha touch 2のitemTplテンプレートでimgを自動的に生成する際に発生するsrcを転送できない問題.

1954 ワード

'<tpl if="scriptImagesStr != \'\' && localStorage[scriptItemId] != \'true\' && xindex &lt; xcount && xindex &gt; 1">'+
    '<td> <p>{scriptContent}</p>
        <img alt="images" src="#" style="width:50px;height:50px;"     onTouchstart="showPicture(\'{scriptImagesStr}\',\'{scriptContent}\')"  onerror="getUrl(\'{scriptImagesStr}\')" /></td>'+
'</tpl>'        

 
最近sencha touch 2を使用する場合、動的に生成されたdataViewのitemTplのテンプレートでは、動的にピクチャimgを生成し、ピクチャurlアドレスを渡す必要があります
ここでtplはxtemplateであり、localStorageはhtml 5のクッキーアップグレード版である.scriptImagesStrは、ピクチャurlを保存するパラメータです.xcountとxindexはtplのパラメータです.
「xindex」:ループのテンプレートにいる場合、この値は現在の「何回目」ループを表します(1から).
「xcount」:ループのテンプレートにいる場合、この値は反復している配列の全長を表します.
このサイトにはxtemplateの知識がいくつかあります.http://evanwukong.blog.163.com/blog/static/134836495201032032447101/.
こちらのsecriptImagesStrには複数の画像が含まれている可能性がありますが、今のところ私の能力ではsrcに直接伝える方法が分からないので、ネットで調べてみると、こちらが使いました.
    
src="#"  onerror="getUrl(\'{scriptImagesStr}\')"

ここでsrcは#番号なのでurlを取得中にエラーが発生し、onerrorのgetUrl関数が実行されます.
function getUrl(){
    var urls=arguments[0];
    var url=urls.split(',')[0];
    var img=event.srcElement;
    img.src=url;
    img.onerror=null;

}

urlsはscriptImagesStrの値ですが、カンマで区切られた文字列で、複数のurlアドレスが含まれている可能性があります.イベントにはイベントが渡されるのでイベントを通過できます.src Elementはimgオブジェクトを取得します.そしてimg.src=url;設定テンプレートに表示される画像は最初の画像です.
最後のimg.onerror=null;実はこちらで取得したurlにも問題があるため、画像がonerrorを呼び出し続けるのは隠し体験の問題なので、最後にimgを設定します.onerror=null.