htmlをjQueryで読み込み、ウィジェットの作成（テンプレート化）のために再利用

Question

ウィジェットをいくつか構築しようとしていて、htmlテンプレートをウィジェット定義から分離したい。私はjQueryを初めて使用しており、小さな読み込み専用ウェブアプリケーションで使用できるかどうかを評価したいと考えています。 私はこれまでダウンしたもの：それは作品

<div> 
 
    <div class="hit-image"> 
 
    <img class="photo" /> 
 
    </div> 
 
</div>

ロードするために：

\t \t 
 
\t \t $(function() { 
 
\t \t 
 
\t \t \t var load = function() { 
 
\t \t \t \t var div = $("<div>"); 
 
\t \t \t \t div.testwidget({imgUrl:"http://foo.com/bar.gif"}); 
 
\t \t \t \t $("#root").append(div); 
 
\t 
 
\t \t \t }; 
 
\t \t 
 
\t \t \t var html; 
 
\t \t \t $.get("testwidget.html", function(data) { 
 
\t \t \t \t html = data; 
 
\t \t \t \t load(); 
 
\t \t \t }, "html"); 
 
\t \t \t 
 

 
\t \t 
 
\t \t \t $.widget("custom.testwidget", { 
 
\t \t \t \t 
 
\t \t \t \t _create: function() { 
 
\t \t \t \t \t 
 
\t \t \t \t \t var content = html; 
 
\t \t \t \t \t var photo = $(content).find(".photo"); 
 
\t \t \t \t \t photo.attr("src", "http://foo.com/bar.gif"); 
 
\t \t \t \t \t //photo.attr("src", function() {return this.imgUrl}); 
 
\t \t \t \t \t this.element.append(content); 
 
\t \t \t \t } \t 
 
\t \t \t }); 
 
\t \t });

ファイルtestwidget.htmlで

はテンプレートのようなものですhtmlを作成し、ウィジェットの作成のために再利用します。私はそれがパフォーマンスのために良いかどうかは分かりませんが、私はすべてのウィジェットの作成時にHTMLを読み込むよりも良いと思います。 imgタグにsrc属性を設定すると動作しません。ウィジェットを追加した後には存在しません。誰が間違っているのか教えてもらえますか？

私のコード構造を改善する方法のヒントについては、その概念の証明だけですが、私は幸せです。

Answer 1

あなたのウィジェット内のオプションをどこで定義するか分かりません。

が

$.widget("custom.testwidget", { 
    options: { 
    imgUrl: "http://foo.com/bar.gif" 
    }, 
    _create: function() { 
    $.get("testwidget.html", function(r){ 
     $(r).find(".photo").attr("src", this.options.imgUrl); 
     this.element.append(r); 
    }); 
    } 
}); 

次に、そのようにそれを使用します：個人的に

var div = $("<div>") 
    .appendTo("#root") 
    .testwidget({ imgUrl: "http://foo.com/bar.gif" }); 
console.log("Loaded " + div.testwidget("imgUrl")); 

、私はちょうど、代替/外部リソースを呼び出す対ウィジェット内のテンプレートになるだろう、私は何かのように期待します。以下のような何か：

$.widget("custom.testwidget", { 
    options: { 
    imgUrl: "http://foo.com/bar.gif" 
    }, 
    _create: function() { 
    var img = $("<img>", { class: "photo", src: this.options.imgUrl }); 
    var wrap = $("<div>", { class: "hit-image" }); 
    wrap.append(img); 
    this.element.append(wrap); 
    } 
}); 

実施例：https://jsfiddle.net/Twisty/wv6kwzpf/