如何获取生成的 Ember.Component HTML答案

【问题标题】：how to get the generated Ember.Component HTML如何获取生成的 Ember.Component HTML
【发布时间】：2014-07-01 17:25:24
【问题描述】：

我正在使用 Emberjs 和 Gridsterjs 创建某种编辑器。我发现您需要制作一个组件以在 Emberjs 中包含一个 jQuery 插件。在该组件内部，我有许多组件将成为 Gridster 的小部件。

这就是我设置模板的方式：

<script type="text/x-handlebars">
  {{#create-gridster}}
    {{create-widget}}
  {{/create-gridster}}
</script>

<script type="text/x-handlebars" data-template-name="components/create-gridster">
  <button class="btn" {{action 'newWidget'}}>add widget.</button>
  <section class="gridster-wrapper">
    <div class="gridster">
      <ul id="gridster-list">
        {{yield}}
      </ul>
    </div>
  </section>
</script>

现在我创建了一个按钮，允许用户将小部件添加到 Gridster，但我无法找到一种方法从组件中为小部件提供请求的 HTML 字符串。

我试过了：

this.get('gridster').add_widget(Ember.Handlebars.compile('{{create-widget}}'));

还有这个：

this.get('gridster').add_widget(App.CreateWidgetComponent.create().createElement());

但这似乎不起作用。

问题
我的问题是如何创建 gridster 期望的 html 字符串并保留用于编辑内容的 ember 功能。

【问题讨论】：

是什么让你觉得你需要在 Ember 中使用一个组件来包含一个 jQuery 插件？当然，这通常是一种以 DRY 方式复制插件代码 sn-ps 的好方法，但您可以以任意数量的不同方式包含 jQuery 插件。例如，在这种情况下，您最好使用 Em.CollectionView
我明白为什么 Em.CollectionView 是更好的选择。但这并不能解决我的问题。
我的意思是你的说法“你需要制作一个组件来包含一个 jQuery 插件”是不正确的。在这种情况下，如果您对网格使用Em.CollectionView 并为网格中的每个框使用itemViewClass，则为每个项目指定模板，该模板将是小部件所需的 html 字符串。如果每个项目都有动态类或属性绑定（例如，宽度、位置或添加类的样式），您也可以使用 itemViewClass 中的绑定来执行此操作。 create-widget 按钮只会将 javascript 对象添加到 gridster 内容数组，而不是“创建”html。

标签： ember.js components gridster

【解决方案1】：

在 myprettycms (myprettycms.codeplex.com) 中，我使用 gridster 创建布局，然后编辑 gridster li 的内容，我在插槽上叠加了一个小 mce，并将插槽的内容传输到 tinyMCE 实例。

完成后，我将 TinyMCEContent 转移到插槽中。

见：http://myprettycms.codeplex.com/SourceControl/latest#MyPrettyCMSCommunityManager/Portals/MVC4Portal/Scripts/Views/DynaContentAdmin.js

【讨论】：