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

Question

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

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

添加一串HTML将难以支持并且看起来很糟糕所以我创建了一个包含模板HTML的外部Handlebars .hbs文件。

通常我会使用$.get()填充此模板而不会出现问题。 但是，我想Ember有办法聪明地做到这一点。 我已经挖掘了API并没有看到任何具体的东西来帮助我。

我会想像var template = Ember.Handlebars.get('upload.hbs'); 会工作，但它会返回一个错误。

任何帮助，将不胜感激。

Answer 1

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

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

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

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

• 没有记录此类功能 。
• 源代码中也没有。

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

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

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}}

我希望这有帮助。