如何在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，輸出

血紅蛋白

<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"
});