如何从现有的HTML创建Kendo布局？
[英]How to create a Kendo layout from existing HTML?
问题描述
I would like to use part of a page for my Kendo layout instead of feeding it with a raw HTML string. 
我想将页面的一部分用于Kendo布局，而不是用原始的HTML字符串填充页面。 However, I am getting an error with this. 但是，我对此有误。 Here is what I am trying to do: 这是我正在尝试做的事情：
<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>
The #main element is part of the HTML page, so I want to cut it out and turn it into a Kendo layout to dynamically convert the page into a single-page app. #main元素是HTML页面的一部分，因此我想将其切出并转换为Kendo布局，以将页面动态转换为单页面应用程序。 This is the error I am gettin though: 这是我开始的错误：
Uncaught Error: Syntax error, unrecognized expression: <div id="head"></div>
<div id="body"></div>
<div id="foot"></div>
Not sure why because it works if I cut and paste the HTML into the layout initialize. 不知道为什么，因为如果我将HTML剪切并粘贴到布局初始化中，它将起作用。 I have a jsFiddle set up here: http://jsfiddle.net/bN754/ 我在这里设置了jsFiddle： http ： //jsfiddle.net/bN754/
2 个解决方案
解决方案1
0 2014-02-20 00:04:32
From Telerik documentation , I would think this is caused by the abscence of the render instruction on your layout object. 从Telerik文档中 ，我认为这是由于布局对象上的render指令缺乏所致。
<script>
var layout = new kendo.Layout($('#main').html());
layout.render($("#main"));
layout.showIn('#head', new kendo.View('<p>...</p>'));
</script>
Let me know if this resolves your issue, otherwise I have an other hypothesis. 让我知道这是否可以解决您的问题，否则我有另一个假设。 :-) :-)
解决方案2
0 已采纳 2014-02-20 16:00:38
Ok I found that that the new lines and spaces in .html() was breaking it. 好的，我发现.html（）中的新行和空格破坏了它。 So I had to scrub out the new lines and spaces before feeding it into the layout: 因此，我必须先清理掉新的行和空格，然后再将其输入到布局中：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.