在Firefox和IE中，SVG不使用kendo模板进行渲染

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 ＆amp; IE 10 。

Answer 1

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

似乎Kendo正在操纵DOM，浏览器不会重新渲染元素。

我使用的解决方法是为父节点提供id（canvasContainer）并在之后刷新innerHTML 的canvasContainer致电kendo.bind。

我还注意到你的小提琴有一个错误（# = 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/。