使用jQuery加载html并重复使用以创建小部件（模板）

Question

Im trying to build some widgets and want to separate the html template from the widget definition. Im new to jQuery and want to evaluate if we can use it for a small read only web application. What I've down so far:

 $(function() { var load = function() { var div = $("<div>"); div.testwidget({imgUrl:"http://foo.com/bar.gif"}); $( "#root" ).append(div); }; var html; $.get("testwidget.html", function(data) { html = data; load(); }, "html"); $.widget("custom.testwidget", { _create: function() { var content = html; var photo = $(content).find(".photo"); photo.attr("src", "http://foo.com/bar.gif"); //photo.attr("src", function() {return this.imgUrl}); this.element.append(content); } }); }); 

In the file testwidget.html is a template like:

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

It works to load the html and reuse it for the widget creation. I dont know if that is good for performance but I think better than loading the html on every widget creation. What doesn't work is setting the src attribute on the img tag. Its just not present after appending the widget. Can anyone tell me what Im doing wrong?

Its just a proof of concept, but Im happy about tips how to improve my code structure.

Answer 1

I don't see where you define the options within your widget. I would expect something like:

$.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);
    });
  } 
});

Then, would use it like so:

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

Personally, I would just just make the template in the widget versus calling an external/alternate resource. Something like:

$.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);
  } 
});

Working Example: https://jsfiddle.net/Twisty/wv6kwzpf/