使用 jquery tmpl 时在原型方法中访问自定义 obj 属性的差异答案

【问题标题】：disparity of accessing a custom obj's properties in a prototype method when using jquery tmpl使用 jquery tmpl 时在原型方法中访问自定义 obj 属性的差异
【发布时间】：2011-04-17 15:33:23
【问题描述】：

我不太确定我的方法是否已经关闭，或者我只是需要一种优雅的方式来解决我正在做的事情。

我有一个自定义的 Javascript 对象，在本例中称为 Dude。
Dude 有 1 个名为“height”的属性和在其原型上定义的 1 个名为“reallyTall”的方法

var Dude = function(props) {
    this.height = "tall";
};
Dude.prototype.reallyTall = function() {
    return this.height + " as heck";
};

我正在创建一个 Dudes 数组（在此示例中只有一个项目），并且想使用 jquery.tmpl() 来获取我的 Dudes 并将它们以某种方式附加到我的 HTML 中的 div 中。（为了这个简单的例子，不缓存模板）

var guy = new Dude();
jQuery.tmpl("<li>${reallyTall}</li>", guy).appendTo('#foo');

其中 #foo 是 HTML 中的空

我想保持我的 Dude 对象足够“通用”，这样如果有人不想将它们与 jquery.tmpl 一起使用，他们就不必......意思是，有人可能想要实现类似的东西到上面，而是做类似的事情：

jQuery("#foo").append('<li>' + guy.reallyTall() + '</li>'));

这就是我的问题出现的地方 - this 在 realTall 方法中的值。

当不使用 tmpl() 时，我可以通过简单地访问 Dude 的高度属性

this.height

但是当使用 tmpl() 时，我必须像这样访问它：

this.data.height

我可以在 realTall 方法中做这样的事情：

this.height || this.data.height

但这看起来很脏。
我希望有人对我的问题有更好的解决方案，或者可以指出我是否在这里错误地使用了 jquery.tmpl()。

这是我的例子：
http://jsfiddle.net/FTF5M/2/

【问题讨论】：

标签： javascript jquery jquery-templates

【解决方案1】：

尝试在您的模板中使用${$data.reallyTall()}。

http://jsfiddle.net/rniemeyer/9CtsV/

【讨论】：