-1

我正在尝试在我的 JSF 网页上添加html5 拖放上传文件,因此我必须将此脚本添加到其中:

<script type="text/html" id="template-uploads">

  //<![CDATA[


      <div data-bind="visible: showTotalProgress()">
            <div>
                <span data-bind="text: uploadSpeedFormatted()"></span>
                <span data-bind="text: timeRemainingFormatted()" style="float: right;"></span>
            </div>
            <div class="uploadimage-totalprogress">
                <div class="uploadimage-totalprogressbar" style="width: 0%;" data-bind="style: { width: totalProgress() + '%' }"></div>
            </div>
        </div>
        <div data-bind="foreach: uploads">
            <div class="uploadimage-upload" data-bind="css: { 'uploadimage-uploadcompleted': uploadCompleted() }">
                <div class="uploadimage-fileinfo">
                    <strong data-bind="text: fileName"></strong>
                    <span data-bind="text: fileSizeFormated"></span>
                    <span class="uploadimage-progresspct" data-bind="visible: uploadProgress() < 100"><span data-bind="text: uploadSpeedFormatted()"></span></span>
                </div>
                <div class="uploadimage-progress">
                    <div class="uploadimage-progressbar" style="width: 0%;" data-bind="style: { width: uploadProgress() + '%' }"></div>
                </div>
            </div>
        </div>

    //]]>
    </script>

该脚本充当某些文件 knockout.js 所需的模板,该文件是上述 html5 插件的一部分,并且 id “template-uploads”是敲除引用模板所必需的。如果我通过取出脚本标签来解开代码,我会收到此错误:

未捕获的错误:找不到 ID 为模板上传的模板

所以我不能通过打开代码来解决这个问题。

如果我取出 CDATA 标记,我会在浏览器控制台上收到此错误:

与元素类型“span”关联的属性“data-bind”的值不能包含“<”字符。

现在的问题是 JSF 页面在脚本代码生成的组件周围呈现了不需要的“//” ...“//]]>”字符,如下所示

4

1 回答 1

1

问题是由这个数据绑定引起的:

data-bind="visible: uploadProgress() < 100"

要摆脱它,只需创建一个比较函数并将 < 替换为它:

var lt = function(v1, v2){
    return v1 < v2;
}

和:

data-bind="visible: lt(uploadProgress(), 100)"

现在你可以删除该死的 CDATA。

您还可以在视图模型中进行计算,它与函数执行相同的操作lt

于 2013-11-08T19:27:48.370 回答