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

发布于 2024-11-01 13:57:40 字数 1316 浏览 4 评论 0原文

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

我有一个自定义 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() 来获取我的伙计们,以某种方式将它们附加到我的 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>'));

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

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

this.height

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

this.data.height

我可以在 realTall 方法中执行类似的操作:

this.height || this.data.height

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

这是我的例子的一个摆弄:
http://jsfiddle.net/FTF5M/2/

i'm not quite sure if my approach here is off, or if i just need an elegant way to solve what i'm doing.

i've got a custom Javascript object, called Dude in this example.
Dude has 1 property called 'height' and 1 method defined on its prototype called 'reallyTall'

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

i'm creating an array of Dudes (with just one item in this example), and would like to use jquery.tmpl() to take my Dudes and append them in some fashion to a div in my HTML.
(not caching template for purposes of this simple example)

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

where #foo is an empty <ul> in the HTML

i'd like to keep my Dude objects 'generic' enough so that if someone does not want to use them with jquery.tmpl, they don't have to....meaning, someone may want to achieve something similar to above, but rather do something like:

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

this is where my issue arises - with the value of this inside of the reallyTall method.

when not using tmpl(), i can access Dude's height property by simply doing

this.height

but when tmpl() is being used, i'd have to access it like so:

this.data.height

i could do something like this in the reallyTall method:

this.height || this.data.height

but that just seems dirty.
i was hoping someone had a better solution to my problem, or can point out if i'm using jquery.tmpl() incorrectly here.

here's a fiddle with my example:
http://jsfiddle.net/FTF5M/2/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

反目相谮 2024-11-08 13:57:40

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

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

Try using ${$data.reallyTall()} in your template.

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文