我有一些父组件和子组件。例如,考虑一个Ember组件作为选项卡菜单的解决方案,它可能看起来像这样:
{{#tab-set}}
{{tab-single title=PageA selected=true}}
{{tab-single title=PageB}}
{{tab-single title=PageC}}
{{/tab-set}}
选项卡需要一种方法来知道应该选择哪个选项卡。选项卡集可以有一个名为deselector的属性。这可以传递给所有的子选项卡单。当单击选项卡-single时,它将切换取消选择器属性,这将被所有其他子选项卡-single观察,确保它们都取消选择。这将允许被单击的选项卡-single成为被选中的选项卡。
它可能看起来像这样…
{{#tab-set}}
{{tab-single title=PageA selected=true deselector=deselector}}
{{tab-single title=PageB deselector=deselector}}
{{tab-single title=PageC deselector=deselector}}
{{/tab-set}}
对于我创建的每个选项卡,我都需要传入取消选择器。是否有一种方法,我可以设置选项卡-single总是在其父选项卡-set中查找取消选择符属性?
也就是说,是否有一种方法可以让子组件总是从父组件中寻找属性,而不必在模板中传递它?
Ta
有一种方法可以使用上下文组件。您需要做的是生成已经绑定了取消选择符的tab-single
组件,而不是直接使用tab-single
。
我已经做了一个工作的Twiddle,所以你可以看看。
首先,我们得到具有deselector
作用界的分量。我使用散列帮助器来内联构造一个对象。这使得导出的变量更加结构化。
// app/templates/components/tab-set.hbs
{{yield (hash tab=(component 'tab-single' deselector=deselector))}}
要能够像那样绑定deselector
动作,意味着我们必须将其传递给tab-set
。由于我们使用的是块形式和yield
,因此我们将拥有所谓的块参数。想想{{each array as |item|}}
语法。Item可以是任何你认为更合适的名称:
{{#tab-set deselector=(action 'deselector') as |opts|}}
{{opts.tab page="1"}}
{{opts.tab page="2"}}
{{opts.tab page="3"}}
{{/tab-set}}
希望这能充分回答你的问题:)