车把或主干将空字符串插入 html

Posted 2023-02-22

【中文标题】车把或主干将空字符串插入 html

【英文标题】：Handlebars or backbone insert empty string into html

【发布时间】：2013-01-30 01:29:49

【问题描述】：

我是车把和主干的新手，我目前正在尝试在我的网页上使用预编译的车把模板。 然而，我不知道是哪个把手或主干在 DOM 中添加了一个空字符串。我不知道为什么。当我在主干视图中编译模板时，不会发生同样的事情。

对我来说更奇怪的是，我有一个预编译的车把模板，这不会发生......

这是预编译时的html图片：

这是在主干视图中编译时的图片：

有人知道为什么会这样吗？

我试图通过只编译不接受任何数据的最简单模板并查看文件中的问题来简化预编译的模板文件...我已经更改了返回字符串，但它没有解决问题，所以我认为问题必须在主干中的某个地方......

简单模板：

<div id="channelsContainer"></div>
<div>
    <div id="postsContainer"></div>
    <div>
        <div id="contentContainer"></div>
        <div id="detailsContainer"></div>
    </div>
</div>

从主干视图中的模板函数返回预编译的模板：

template:   function(data)
    
        return Handlebars.templates['shell.html'];
    

在视图中编译时返回模板：

template:   function(data)
        
            var handlebarTemplate = Handlebars.compile('<div id="channelsContainer"></div> \
<div> \
    <div id="postsContainer"></div> \
    <div> \
        <div id="contentContainer"></div> \
        <div id="detailsContainer"></div> \
    </div> \
</div>');

            return handlebarTemplate;
        

在同一个主干视图中，在初始化方法中：

this.$el.empty().html(this.template());

非常感谢您对找出正在发生的事情的任何帮助。

【参考方案1】：

我只能猜测，但我的一个模板也有类似的问题。就我而言，内联模板是解析为 DOM 节点的字符串，而不是解析为 DOM 节点的 XML。结果，任何错误的空白在解析后都被转换为 TEXT 元素，在调用模板时它们正在进入 DOM。

【讨论】：

我已经尝试消除所有空格和新行...问题仍然存在...有没有办法可以将字符串解析为 XML 或 DOM 节点？你认为这样能解决问题吗？

对不起，我不知道。我想我会提到它以防万一，因为那是我的问题，所以我认为它也可能是你的问题。

感谢您的尝试，非常感谢。

【参考方案2】：

我的同事找到了问题的答案……他只是用 UTF-8 保存了文件，没有 BOM 编码…… 资源： UTF-8 without BOM

似乎 Visual Studio 使用不适当的编码保存文件...

感谢两位的支持。