javascript - 在 Ember.js 中将字符串组合到绑定(bind)变量

Question

我需要在我的 Ember.js/Handlebars 模板中包含图像。

我正在使用<img {{bindAttr src="short_name"}}>如果图像恰好是 Short_name 的值并且位于根目录中，那么这将起作用。

但是，我需要像这样构造 img src:

'/images/avatars' + short_name + '_avatar.jpg'

这将如何在 ember/handlebars 中实现？

Answer 1

考虑到short_name不会改变，你可以这样做:

<img src="/images/avatars{{unbound short_name}}_avatar.jpg">

但是如果 short_name 变化很大，您应该使用计算属性，如下所示:

var SomeModel = Ember.Object.extend({
  shortName: null,
  imgSrc: function() {
    var shortName = this.get('shortName');
    return '/images/avatars' + shortName + '_avatar.jpg';
  }.property('shortName')
});

然后在您的模板上:

<img {{bindAttr src="imgSrc"}}>