Question

我有一个组件ui-button-group，我想从yield块访问属性。

ui-button-group组件具有open属性。 ui-button组件可以传递一个属性，以便在单击时切换。我希望该属性绑定到父open组件的ui-button-group属性。

{{#ui-button-group }}

   {{#ui-button action="finalize"}}
     Finalize Invoice
   {{/ui-button}}

    {{#ui-button togglePropery=component.open}}
       <span class="caret"></span>
    {{/ui-button}}

    {{#ui-dropdown }}
       <li><a href="#">Delete</a></li>
    {{/ui-dropdown}}

 {{/ui-button-group}}

作为临时工作，我在控制器上设置了一个属性，并将其传递给ui-button-group和＆＃39; ui-button`。

任何人都知道从yield块中访问组件实例的方法吗？

Answer 1

我通过修改组件中的_yield函数来包含组件上下文。

这是一个工作示例。

http://jsbin.com/xuvuz/2/

更新

在当前版本1.6.0中，传入块中的view属性引用组件。

http://jsbin.com/xuvuz/3

//components/ui-button-group.js
export default Ember.Component.extend({
  classNames: ['ui-button-group'],
  classNameBindings: ['open'],
  open: false
})

//components/ui-button.js
export default Ember.Component.extend({
  tagName: 'button',
  togglePropery: null,

  click: function() {
    var toggle = this.get('togglePropery');

    if (!Ember.isNone(toggle)) {
      this.toggleProperty('togglePropery');      
    }

    this.sendAction();
   }
});


//templates/index.hbs
{{#ui-button-group }}

  {{#ui-button action="finalize"}}
    Finalize Invoice
  {{/ui-button}}

  {{#ui-button togglePropery=view.open}}
    <span class="caret"></span>
  {{/ui-button}}

  {{#ui-dropdown }}
    <li><a href="#">Delete</a></li>
  {{/ui-dropdown}}
{{/ui-button-group}}

OLD HACK

export default Ember.Component.extend({

  classNames: ['ui-button-group'],

  classNameBindings: ['open'],

  open: false,


  _yield: function(context, options) {
    var view = options.data.view,
      parentView = this._parentView,
      template = get(this, 'template');


    if (template) {
      Ember.assert("A Component must have a parent view in order to yield.", parentView);

      view.appendChild(Ember.View, {
        isVirtual: true,
        tagName: '',
        _contextView: parentView,
        template: template,
        component: view,   //added this line
        context: get(parentView, 'context'),
        controller: get(parentView, 'controller'),
        templateData: { keywords: parentView.cloneKeywords() }
      });
    }
  },

});

现在我已将component: view添加到视图选项中，我可以像这样访问该组件。

{{#ui-button-group }}

  {{#ui-button action="finalize"}}
    Finalize Invoice
  {{/ui-button}}

  {{#ui-button togglePropery=_view.component.open}}
    <span class="caret"></span>
  {{/ui-button}}

  {{#ui-dropdown }}
    <li><a href="#">Delete</a></li>
  {{/ui-dropdown}}
{{/ui-button-group}}

我建议在生成的yield视图中添加component关键字。

从yield块中访问组件属性

1 个答案:

更新

OLD HACK