Блог

У меня проблемы с пониманием шаблонов embers.

Итак, у меня есть этот объект, который присваивается модели IndexRoute:

 App.Session = Ember.Object.extend({
  function_without_argument: function () {
    return 'http://www.veryicon.com/icon/png/Flag/Rounded World Flags/Spain Flag.png';
  }.property(),

  with_argmument: function (value){
    return 'http://www.veryicon.com/icon/png/Flag/Rounded World Flags/'   this.get(value)   ' Flag.png';
  }.property()
});
 

вызов <img width="20" {{bind-attr src=function_without_argument}}> работает, но не с аргументом <img width="20" {{bind-attr src="with_argmument answer.leader"}}> .

Почему?

Я сделал небольшой пример codepen: http://codepen.io/gurix/pen/zmdDh

Вычисляемое свойство не должно получать параметр, вместо этого используйте свойство объекта.

Пример,

http://codepen.io/anon/pen/ghnsD

js

 App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.Session = Ember.Object.extend({
  targetFlag:null,
  function_without_argument: function () {
  return 'http://www.veryicon.com/icon/png/Flag/Rounded World Flags/Spain Flag.png';
  }.property(),

  answer_image: function (){
    return 'http://www.veryicon.com/icon/png/Flag/Rounded World Flags/'   this.get("answer.leader")   ' Flag.png';
  }.property()
});


App.IndexRoute = Ember.Route.extend({
  model: function() { 
    var session = App.Session.create();
    session.setProperties({ 
      token: 'abc',
      answer: {
        leader: 'Switzerland',
        looser: 'Argentina'
      }});
    return session;}
});
 

hbs

 <script type="text/x-handlebars">
  <h2>Welcome to Ember.js</h2>

  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">

  without argument: <img {{bind-attr src=function_without_argument}}>

     {{answer.leader}} becomes the image ... 

    <img {{bind-attr src=answer_image}} >



</script>