在 Ember 中将模板数据存储为字符串

Question

我正在使用 Ember 和上传插件。该插件允许我通过属性作为字符串覆盖它的 HTML 模板。

$("#fileUpload").dropzone({
   previewTemplate: ' some huge html string',
});

添加 HTML 字符串很难支持并且看起来很糟糕，因此我创建了一个外部 Handlebars .hbs 文件，其中包含模板 HTML。

通常我会使用$.get() 填充此模板而不会出现问题。但是，我认为 Ember 有办法智能地做到这一点。我已经深入研究了 API，但没有看到任何可以帮助我解决此问题的具体内容。

我认为像 var template = Ember.Handlebars.get('upload.hbs'); 这样的东西会起作用，但它会返回错误。

任何帮助将不胜感激。

Answer 1

在我之前的（已删除）回答澄清之后，只是想总结一下你在做什么。

• 您有一个插件，它接受纯 html 字符串。
• 您要提供给插件的 html 字符串很长。
• 您希望将字符串存储为外部文件，以避免包含在常规代码中。
• html 字符串不是 Handlebars 模板，尽管您将其存储为 upload.hbs。
• 您希望 Ember 有一个加载远程模板的方法，您可以使用它来避免使用 jQuery GET。

没有加载远程模板的方法：

现实情况是，Ember 没有内置方法来加载原始格式的远程模板文件。但是，它确实允许您将车把模板预编译为 JavaScript，可以作为常规 script 标签包含在内。但由于您没有使用车把模板，预编译只会将您的 html 字符串包装在一些 JavaScript 中。

• 没有这样的feature documented。
• the source code 中也没有。

为什么Ember.Handlebars.get('upload.hbs') 不起作用：

This method 用于获取本地包含模板的内容。这意味着它只查找存在于Ember.TEMPLATES 数组或<script> 类型为text/x-handlebars 的标签中的模板。

Ember 无法加载远程模板文件的原因：

它没有加载原始车把文件的方法，因为：

• 很多人使用预编译的车把文件（可以作为远程JS加载）

• 许多人使用内联<script type="text/x-handlebars"></script> 标签。
  值得注意的是，您不能使用script 的src 属性来拉入车把模板，因为浏览器将只接受src 的text/javascript。

• Ember 依赖于 jQuery，并且由于 jQuery 提供了合适的方法 GET 和 AJAX，如果需要，与 Ember.Handlebars.compile("<strong>Hello {{name}}</strong>") 一起实现是微不足道的。

您的模板：

由于您没有使用 Handlebars 模板而只是加载 html，因此您怀疑的正确方法是 jQuery GET。

$.get( "dropZoneUploadTemplate.html", function(template) {
    $("#fileUpload").dropzone({
        previewTemplate: template
    });
});

总结

虽然在可能的情况下使用 Ember 很不错，但这只是一个 jQuery 任务。抱歉，这不是您希望的答案。也许在 Ember 的未来版本中，它会包含诸如此类的功能。

---

将上传器变成 Ember 组件：

你可以像这样把你的上传器变成一个 Ember 组件，并结合 jQuery GET 来负责加载你的 html。

App.FileUploadComponent = Ember.Component.extend({
    template: Ember.Handlebars.compile("<input type='file' />"),
    didInsertElement: function(){
        var c = this.$(":file");
        $.get("dropZoneUploadTemplate.html", function(template){
            c.dropzone({ previewTemplate: template });
        });
    }
});

这意味着每次您想在 Ember 模板化视图中使用上传控件时，您只需执行以下操作：

{{file-upload}}

我希望这会有所帮助。