javascript - Ember、Handlebars、Contrib-Ember-Templates 在移动浏览器上生成格式错误的模板

Question

在移动浏览器上查看时，使用 Gruntjs 插件 contrib-ember-templates 会产生不正确的结果。

生成的模板

<div id="ember570" class="ember-view">
<section>
    <div class="center">
        <div class="logo-container">
        </div>
        <div class="misuseAct">
            <script id="metamorph-0-start" type="text/x-placeholder"></S'+'CRIPT>
                <h1>Hello to Splash Page</h1>
                <p>Welcome to my splash page</p>
                <a href="#" data-ember-action="1" class="btn btn-success right" id="proceed">Proceed</a>
            <script id='metamorph-0-end' type='text/x-placeholder'></S'+'CRIPT>
        </div>
    </div>
</section></script></div></div></section></div>

但是，通过实时调试编辑模板会产生所需的结果。

所需模板

<div id="ember570" class="ember-view">
<section>
    <div class="center">
        <div class="logo-container">
        </div>
        <div class="misuseAct">
            <script id="metamorph-0-start" type="text/x-placeholder"></script>
                <h1>Hello to Splash Page</h1>
                <p>Welcome to my splash page</p>
                <a href="#" data-ember-action="1" class="btn btn-success right" id="proceed">Proceed</a>
            <script id='metamorph-0-end' type='text/x-placeholder'></script>
        </div>
    </div>
</section></div></div></section></div>

其他信息

• 此问题仅在使用 EmberJS 缩小版(发布版本)时出现。

• 此问题不会在桌面浏览器上出现。

• 此问题不会产生控制台消息。

• 运行 grunt --verbose 不会显示任何错误/警告消息。

技术栈

NodeJS - v0.10.12

grunt-cli v0.1.9

咕噜 v0.4.1

grunt-contrib-templates - 0.4.10

JQuery - v1.10.2

这些由 contrib-grunt-template 和前端客户端应用程序使用。

EmberJS - v1.0.0-rc.6-15-gfe89337(缩小版)

Handlebars - 1.0.0

编辑:

仅当在模板上使用 View 时，此问题才会出现。

未编译的模板

<section>
    <div class="center">
        <div class="logo-container">
        </div>
        <div class="misuse">
            {{#if view.showProtection}}
                <h1>{{localise _data_protection_act_header}}</h1>
                <p>{{localise _data_protection_act_body}}</p>
                {{#linkTo "login" classNames="btn btn-success right" id="proceed"}}{{localise _proceed}}{{/linkTo}}
            {{else}}
                <h1>{{localise _misuse_act_header}}</h1>
                <p>{{localise _misuse_act_body}}</p>
                <a href="#" {{action 'agrees' target="view"}} class="btn btn-success right" id="proceed">{{localise _proceed}}</a>
            {{/if}}
        </div>
    </div>
</section>

索引 View

Application.IndexView = Ember.View.extend({
    showProtection: false,
    agrees: function () {
        this.set('showProtection', true);
    }
});

编辑:

我已将范围缩小到模板中的这一行。

 {{#if view.showProtection}}
    ...
 {{else}}
    ...
 {{/if}}

Answer 1

此问题与移动数据提供商 O2(可能是其他提供商，但不是沃达丰或 3)有关。

这似乎是因为 O2 相当严格的数据政策，其中他们会缩小、剥离并做各种crazy文件中的东西通过他们的网络。

提供了解决方法 here