如何在 ember 的嵌入视图中访问组件属性？

Question

我正在将一些 html 传递给 ember 中的组件。 html 已生成。 但是生成的 html 无法访问组件中定义的属性。但是，这些属性确实适用于组件模板。

组件

import Ember from 'ember';

export default Ember.Component.extend({
  user: undefined,
  replyText: undefined,

  onInitialization: function(){
    this.set('replyText', '@' + this.user.get('username') + ' ');
  }.on("init"),

  remainingTweetChars: function () {
    var length = 140 - this.get('replyText').length;

    return length;
  }.property('replyText')

});

组件模板

{{remainingTweetChars}} {{!-- this works --}}

{{yield}}

在上面的组件模板中生成的 html 组件使用

{{#action-reply class="item-actionables__reply"
  user=user
}}

  <span>{{remainingTweetChars}}</span> {{!-- this does NOT works --}}
  <span>{{view.remainingTweetChars}}</span> {{!-- this does NOT works --}}
{{/action-reply}}

Answer 1

要克服这个问题，您可以将viewName 分配给组件并使用它来引用任何定义的属性。

例子，

http://emberjs.jsbin.com/bihuzupogi/1/edit?html,js,output

hbs

<script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
    <h3>Component in block form example accessing props</h3>

    {{outlet}}
  </script>

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

  {{#test-comp propInTmpl="test-prop-in-tmpl" viewName="the-test-comp"}}
  <span style="color:gray">
  this is content of the block content <b>without</b> using <b>viewName</b>
   (<b>props:</b> {{propInTmpl}}, {{propInClass}})
  </span>
  <br/>
  <span style="color:gray">
  this is content of the block content using the <b>viewName</b>
   (<b>props:</b> {{view.the-test-comp.propInTmpl}}, {{view.the-test-comp.propInClass}})
  </span>
  {{/test-comp}}
  </script>

  <script type="text/x-handlebars" data-template-name="components/test-comp">

  <i>This is content of test-compo component template! (<b>props:</b> {{propInTmpl}}, {{propInClass}})</i>
  <br/>
  {{yield}}
  </script>

js

App = Ember.Application.create();

App.TestCompComponent = Em.Component.extend({
  propInClass:"test-prop-in-class"
});