Question

我正在尝试构建一些小部件，并希望将html模板与小部件定义分开。我是jQuery的新手，想要评估我们是否可以将它用于小型只读Web应用程序。我到目前为止所做的事情：

＆＃13;

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

＆＃13;

在文件testwidget.html中有一个模板，如：

＆＃13;

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

＆＃13;

它可以加载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/

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

1 个答案: