Javascript 如何从现有HTML创建剑道布局？_Javascript_Jquery_Html_Kendo Ui_Single Page Application

Javascript 如何从现有HTML创建剑道布局？

javascript jquery html kendo-ui

Javascript 如何从现有HTML创建剑道布局？,javascript,jquery,html,kendo-ui,single-page-application,Javascript,Jquery,Html,Kendo Ui,Single Page Application,我想在剑道布局中使用页面的一部分，而不是使用原始HTML字符串。然而，我得到了一个错误。以下是我试图做的： <html> <body> ... <div id="main"> <div id="head">...</div> <div id="body">...</div> <div id="foot">...</div> </div>

我想在剑道布局中使用页面的一部分，而不是使用原始HTML字符串。然而，我得到了一个错误。以下是我试图做的：

<html>
<body>
  ...
  <div id="main">
    <div id="head">...</div>
    <div id="body">...</div>
    <div id="foot">...</div>
  </div>
  ...
  <script>
    var layout = new kendo.Layout($('#main').html());
    layout.showIn('#head', new kendo.View('<p>...</p>'));
  </script>
</body>
</html>

不知道为什么，因为如果我剪切HTML并将其粘贴到布局中，它会起作用。我在这里设置了一个jsFiddle:

从，我认为这是由于布局对象上缺少render指令造成的

    <script>
        var layout = new kendo.Layout($('#main').html());
        layout.render($("#main"));
        layout.showIn('#head', new kendo.View('<p>...</p>'));
    </script>


var layout=new kendo.layout（$（'#main'）.html（））；
布局。渲染（$（“#主”）；
layout.showIn（“#head”，新剑道视图（“…”）；

如果这解决了您的问题，请告诉我，否则我有另一个假设。：-）

好的，我发现.html（）中的新行和空格破坏了它。因此，在将其输入布局之前，我必须清除新的线条和空间：

<html>
<body>
  ...
  <div id="main">
    <div id="head">...</div>
    <div id="body">...</div>
    <div id="foot">...</div>
  </div>
  ...
  <script>
    var html = $('#main').html().replace(/^\s+|\r\n|\n|\r|(>)\s+(<)|\s+$/gm, '$1$2');
    $('#main').empty();

    var layout = new kendo.Layout(html);
    layout.render("#main");
  </script>
</body>
</html>


...
...
...
...
...
var html=$（“#main”）.html（）.replace（/^\s+|\r\n |\n |\r |（>）\s+（我确实在路由下面进行了渲染。您还想到了什么？@Kad不会从DOM中删除html然后读取它？
<html>
<body>
  ...
  <div id="main">
    <div id="head">...</div>
    <div id="body">...</div>
    <div id="foot">...</div>
  </div>
  ...
  <script>
    var html = $('#main').html().replace(/^\s+|\r\n|\n|\r|(>)\s+(<)|\s+$/gm, '$1$2');
    $('#main').empty();

    var layout = new kendo.Layout(html);
    layout.render("#main");
  </script>
</body>
</html>