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字符串非常长。
您希望将字符串存储为外部文件，以避免包含在常规代码中。
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>标记。
值得注意的是，您无法使用src的{{1}}属性来提取句柄模板，因为浏览器只接受script src。
Ember依赖于jQuery，并且jQuery提供了合适的方法text/javascript＆amp; GET如果需要，与AJAX一起实施是微不足道的。

您的模板：

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

Ember.Handlebars.compile("<strong>Hello {{name}}</strong>")

<强>摘要

虽然尽可能使用Ember很好，但这只是一个jQuery任务。对不起，这不是你希望的答案。也许在未来版本的Ember中它将包括诸如功能。

将上传者变为Ember组件：

您可以将上传器转换为这样的Ember组件，并与jQuery GET结合使用来处理html中的加载。

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

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

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中的字符串

1 个答案: