ember.js - 如何获取生成的 Ember.Component HTML

Question

我正在使用 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 功能。

Answer 1

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

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

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