Question

此ember组件模板：

<script type="text/x-handlebars" id="components/blog-post">
  <h1>Component: {{title}}</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</script>

这是组件代码：

App.BlogPostComponent = Ember.Component.extend({
    // how can i access the title property here? (this.title doesn't work)
    // also this.get('title') throws error: undefined is not a function
    computedProp: 'width' + this.title
});

它的用法：

{{blog-post title=title body=body}}

我可以使用{{title}}轻松地从组件模板访问title属性。

如何从组件代码title中访问App.BlogPostComponent属性。

还有一种简单的方法可以在车把中嵌入属性，例如：

<h1 style="width: {{percent}}%">

修改：

当我按照建议这样做时：

App.BlogPostComponent = Ember.Component.extend({
  computedProp: function () {
    return 'width' + this.get('title');
  }.property('title')
});

我收到错误：

Uncaught Error: Assertion Failed: Attributes must be numbers, 
strings or booleans, not function () {
            return 'width:' + 50 + '%';
        }

Edit2：确定错误的原因是在函数定义结束时省略了.property('title')。现在已经修好了。

Answer 1

this.get应该可以正常工作，问题是你没有在对象上下文中调用它。定义计算属性的正确方法是：

App.BlogPostComponent = Ember.Component.extend({
  computedProp: function () {
    return 'width' + this.get('title');
  }.property('title')
});

<h1 style="width: {{percent}}%">之类的东西现在是不可能的，你应该使用bind-attr helper + computed属性。

如何将参数传递给ember组件

1 个答案: