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

Question

I am passing some html to a components in ember. The html is yielded.
But the yielded html is unable to access properties defined in the component. However the properties do work on the component template.
component
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')
});
component template
{{remainingTweetChars}} {{!-- this works --}}
{{yield}}
component usage with html which is yielded into the component template above
{{#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

To overcome this you can assign a viewName to the component and use it to reference any property defined.
Example,
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"
});