Ember:如何将"else“添加到包装组件中？

Question

我有一个组件来隐藏设计的某些部分，这取决于用户权限。

只要隐藏就不成问题了。有时我需要显示一些东西，当用户没有访问权限。

路由模板：

{{#restricted-access required-action="AddRoles"}}
    <button class="btn btn-success"  {{action 'add'}}>
        Add New Role
    </button>
{{else}}
    You can not add Roles
{{/restricted-access}}

组件校验码：

actionAllowed: function() {
    var permission = this.get('current.user.role.roleActionList');
    return permissions.filterProperty('code', this.get('required-action')).length > 0;
}.property('current.user.role.roleActionList.length')

组件模板：

{{#if actionAllowed}}
    {{yield}}
{{/if}}

我在找像这样的东西

{{#if actionAllowed}}
    {{yield}}
{{else}}
    {{else yield}}
{{/if}}

我可以在其中添加在路由模板中定义的文本。

我想我可以这样做：

{{#restricted-access required-action="AddRoles"}}
    {{#access-granted}}
        <button class="btn btn-success"  {{action 'add'}}>
            Add New Role
        </button>
    {{#access-granted}}
    {{#access-declined}}
        You can not add Roles
    {{/access-declined}}
{{/restricted-access}}

实际上，我不喜欢这样，因为我必须创建额外的组件。

有没有办法在一个组件中实现所需的功能？

Answer 1

因为else块只是一个字符串，所以我只需要传递一个带有else文本的参数：

{{#restricted-access required-action="AddRoles" noAccessText="You can not add Roles"}}
    <button class="btn btn-success"  {{action 'add'}}>
        Add New Role
    </button>
{{/restricted-access}}

模板组件：

{{#if actionAllowed}}
    {{yield}}
{{else}}
    {{noAccessText}}
{{/if}}

Answer 2

组件应该对控制器/模型是不可知的，它更像是显示/动作功能。

我建议你使用控制器方法和if来检查权限：

{{#if restriction.canAddroles}}
 ..actions...
{{else}}
  You can not add Roles
{{/if}}

可以使用初始化器将restriction注入到所需的控制器中。

#... restriction class
export Ember.Object.create 
  canAddroles: ->
   @actionAllowed('addRoles')

  actionAllowed: ->
    # code from your post

我知道由于if的限制，它更冗长，但现在您的逻辑存储在适当的位置，并且更易于测试。