internet-explorer - SVG未在Firefox和IE中使用Kendo模板渲染

Question

我想使用结合了MVVM View 模型的Kendo模板来构建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)，并在调用innerHTML之后刷新canvasContainer的kendo.bind。

我还注意到您的 fiddle 有一个错误(# = 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/。