从收益块内访问组件属性 [英] Access component properties from within yield block

问题描述

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

I have a component ui-button-group that I would like to access properties on from the yield block.

ui-button-group 组件有一个打开属性。 ui-button 组件可以传递一个属性来切换点击。我希望该属性绑定到父 ui-button-group 组件的打开属性。 p>

The ui-button-group component has a open property. The ui-button component can be passed a property to be toggled on click. I would like that property to be bound to the open property of the parent ui-button-group component.

{{#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 和'ui -button`。

As a temporary work around I have setup a property on the controller and passed it to both the ui-button-group and the 'ui-button`.

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

Anyone know a way to access the component instance from within the yield block?

推荐答案

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

I pulled it off by modifying the _yield function in my component to include the component context.

这是一个工作示例。

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

在当前版本1.6.0中，传入的视图属性块是指组件。

In the current release 1.6.0 the view property in the passed in block refers to the component.

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

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 对于视图选项，我可以访问这个组件。

Now that I have added component: view to the view options I can access the component like so.

{{#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}}

我建议在生成的收益视图中添加组件关键字。

I propose adding a component keyword to the generated yield view.

这篇关于从收益块内访问组件属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！