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

Question

我正在将一些 html 传递给 ember 中的组件。 html 被产生。但是 yielded 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"
});

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

How do I access component properties in a transcluded view in ember?

handlebars.js

ember.js

ember-data

ember-components