Question

我有一个{{#resizable-column}}块组件，其宽度由{{drag-handle}}组件控制。就标记而言，它们是兄弟姐妹，并依赖于其父级的宽度（使用flexbox显示）。

我想将其减少到包含列和拖动句柄的单个组件，理想情况下没有任何冗余标记或任何额外的样式：

{{#resizable-column width=navWidth}}
  My content
{{/resizable-column}}

导致：

<div class="resizable-column" style="width: `navWidth`">
  My content
</div>
<div class="drag-handle" style="right: `navWidth`"></div>

这就是我的想法：

<script type="text/x-handlebars" id="components/resizable-column">
  {{#the-column width=width}}
    {{yield}}
  {{/the-column}}

  {{drag-handle positionRight=width}}
</script>

但考虑到组件和视图包装其内容，这会产生额外的div。可以/应该使用Handlebars助手吗？

编辑：我与以下内容非常接近：

Ember.Handlebars.registerHelper('resizable-column', function (options) {
  Ember.Handlebars.resolveHelper(options.data.view.container, 
                                 'the-column').call(this, options);
  Ember.Handlebars.resolveHelper(options.data.view.container, 
                                 'drag-handle').call(this, options);
});

但是，在给出相同选项的情况下，两次调用助手似乎不起作用：http://emberjs.jsbin.com/yepoya/3/edit

Answer 1

但考虑到组件和视图包装其内容，这会产生额外的div

一个可能的解决方案是消除该包装div。您可以通过将tagName设置为空字符串来完成此操作。像这样：

App.ResizableColumnComponent = Ember.Component.extend({
    tagName: ''
});

我不时这样做，请注意组件的$方法将不再起作用。所以调用this.$('...')将始终返回一个空的jQuery选择器。虽然有简单的方法。

渲染两个组件（带有Handlebars帮助器？）

1 个答案: