SVG 在 Firefox 和 IE 中不使用剑道模板呈现

Question

我想用 Kendo 模板与 MVVM 视图模型绑定来构建 SVG 路径。看到这个JS fiddle。

已知问题：

在 Firefox 中，当我们检查 SVG 元素并编辑该 SVG 标签元素（右键单击并选择“编辑 SVG”）时，SVG 正在呈现。

但在 IE 10 中，SVG 标签中找不到路径标签。

HTML 代码：

<div class="canvasTabContainer leftFloat" style="height: 522px;">
    <div class="canvasHolder workflowContainer_#= tabId #">
        <div class="canvasContainer relPosition">
            <svg id="edges_#= tabId #" width="100%" data-template="canvasEdges_renderer" data-bind="source: edges" height="99%" class="pAbsolute" style=""></svg>
            <div id="items_#= tabId #" class="items relPosition" data-template="canvasItems_renderer" data-bind="source: items"></div>
        </div>
    </div>
</div>
<script id="canvasItems_renderer" type="text/x-kendo-template">
    < div class = "canvasMatrixCell"
    itemid = "#=id#" > Item# = id# < /div>
</script>
<script id="canvasEdges_renderer" type="text/x-kendo-template">
    < path d = "#= svgPath #"
    class = "js-no-pan edgeStyle" > < /path>
</script>

JavaScript：

var canvasViewModel = [{
    "id": 1
}];
var canvasEdgeModel = [{
    "svgPath": "M382,121.5L396,121.5s 10 0 10 -10L406,50.5s 0 -10 10 -10L430,40.5M427,36.5L431,40.5L427,44.5"
}];

var canvasViewModel = kendo.observable({
    items: canvasViewModel,
    edges: canvasEdgeModel
});
kendo.bind($(".canvasHolder"), this.canvasViewModel);

它不适用于 Firefox 29.0.1 和 IE 10。

Answer 1

好的，我找到了解决问题的方法。

似乎 Kendo 正在操纵 DOM，浏览器并没有重新渲染元素。

我使用的解决方法是给父节点一个id (canvasContainer) 并在调用kendo.bind 之后刷新canvasContainer 的innerHTML。 /p>

我还注意到您的小提琴有一个错误（# = id# 而不是#= id#），更正了该错误，并手动改进了源格式。

HTML：

<div class="canvasTabContainer leftFloat" style="height: 522px;">
    <div class="canvasHolder workflowContainer_#= tabId #">
        <div class="canvasContainer relPosition" id="canvasContainer">
            <svg id="edges_#= tabId #" width="100%" data-template="canvasEdges_renderer" data-bind="source: edges" height="99%" class="pAbsolute" style=""></svg>
            <div id="items_#= tabId #" class="items relPosition" data-template="canvasItems_renderer" data-bind="source: items"></div>
        </div>
    </div>
</div>
<script id="canvasItems_renderer" type="text/x-kendo-template">
    <div class="canvasMatrixCell" itemid="#=id#">Item#= id#</div>
</script>
<script id="canvasEdges_renderer" type="text/x-kendo-template">
    <path d="#= svgPath #" class="js-no-pan edgeStyle"></path>
</script>

JavaScript：

var canvasViewModel = [{
    "id": 1
}];
var canvasEdgeModel = [{
    "svgPath": "M382,121.5L396,121.5s 10 0 10 -10L406,50.5s 0 -10 10 -10L430,40.5M427,36.5L431,40.5L427,44.5"
}, {
    "svgPath": "M788,40.5L836,40.5M833,36.5L837,40.5L833,44.5"
}, {
    "svgPath": "M179,40.5L227,40.5M224,36.5L228,40.5L224,44.5"
}, {
    "svgPath": "M585,40.5L633,40.5M630,36.5L634,40.5L630,44.5"
}, {
    "svgPath": "M179,121.5L227,121.5M224,117.5L228,121.5L224,125.5"
}];

var canvasViewModel = kendo.observable({
    items: canvasViewModel,
    edges: canvasEdgeModel
});
kendo.bind($(".canvasHolder"), this.canvasViewModel);

// Added
document.getElementById('canvasContainer').innerHTML += '';

有关工作示例，请参阅 http://jsfiddle.net/qqzmZ/16/。