EmberJS:在模板中呈现get / set的计算属性

时间:2014-03-16 08:48:30

标签: javascript ember.js

这是我的代码的简化版本,但它仍然说明了我遇到的问题。我正在尝试使用textValue绑定计算的属性值。

请注意,我知道我可以按照fiddle中所示执行基本操作,但这不符合我的需要。

在此代码的大版本中,未在此处说明,我在设置和修改value之后对text执行修改。这就是为什么我不能只使用上面提到的默认绑定的要点。

JS

var App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
    text: "Default",
    textValue: function(key, value) {
        if(arguments.length === 1) {
            return this.get('text');
        } else {
            this.set('text', value);
        }
    }.property('text')
});

HTML

<script type="text/x-handlebars" data-template-name="application">
    {{input value=textValue}}
    <br>   
    TextValue: {{textValue}}
</script>

Fiddle

提前致谢!

2 个答案:

答案 0 :(得分:5)

从Ember.js 1.12开始,不推荐检查参数长度,因为已经采用了计算属性的离散setter / getters。

textValue: Ember.computed('text',  {
    get() {
      return this.get('text');
    },
    set(value) {
      this.set('text', value);
    }
  })

答案 1 :(得分:4)

需要返回计算属性的值

http://jsfiddle.net/EW7xD/2/

<强> JS

App.ApplicationController = Ember.Controller.extend({
    text: "Default",
    textValue: function(key, value) {
        if(arguments.length === 1) {
            return this.get('text');
        } else {
            this.set('text', value);
            return this.get('text');
        }
    }.property('text')
});

或者可以简化它

App.ApplicationController = Ember.Controller.extend({
    text: "Default",
    textValue: function(key, value) {
        if(arguments.length > 1) {
            this.set('text', value);
        } 
        return this.get('text');
    }.property('text')
});