Как создать макет Kendo из существующего HTML?

Question

Как создать макет Kendo из существующего HTML?

0

Я хотел бы использовать часть страницы для моего макета Kendo вместо того, чтобы кормить его необработанной строкой 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>

Элемент #main является частью HTML-страницы, поэтому я хочу вырезать его и превратить в макет Kendo для динамического преобразования страницы в одностраничное приложение. Это ошибка, которую я получаю:

Uncaught Error: Syntax error, unrecognized expression: <div id="head"></div>
    <div id="body"></div>
    <div id="foot"></div>

Не уверен, почему, потому что он работает, если я вырезал и вставлял HTML в макет инициализации. У меня есть jsFiddle, созданный здесь: http://jsfiddle.net/bN754/

TruMan1 18 фев. 2014, в 21:12

Источник

Теги:

javascript

jquery

html

single-page-application

kendo-ui

2 ответа

0

Из документации Telerik я бы подумал, что это вызвано отсутствием инструкции рендеринга вашего объекта макета.

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

Дайте мне знать, если это решит вашу проблему, иначе у меня будет другая гипотеза. :-)

Kad 19 фев. 2014, в 22:36

0

У меня есть рендер ниже маршрутов. Что еще вы имели в виду?
TruMan1 20 фев. 2014, в 15:50
0

@ Kad Не будет ли рендерить удаление HTML из DOM и чтение его?
Jacques 03 сен. 2015, в 13:01

Ещё вопросы

У меня есть рендер ниже маршрутов. Что еще вы имели в виду?
@ Kad Не будет ли рендерить удаление HTML из DOM и чтение его?

TruMan1 · Accepted Answer · 2014-02-20T14-22-00.000Z

Хорошо, я обнаружил, что новые строки и пробелы в.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>

http://jsfiddle.net/bN754/2/