javascript - Kendo : How to render a kendo. View 或来自单独文件的 kendo.Layout？

Question

我想知道是否可以加载 kendo.View(...) 或 kendo.layout(...) 的内容一个单独的 html 文件？

这是剑道的例子Hello World Single Page Application :

<div id="app"></div>

<script id="index" type="text/x-kendo-template">
    Hello <span data-bind="text: foo"></span>
</script>

<script>
    var index = new kendo.View(
        "index", // the id of the script element that contains the view markup
        { model: kendo.observable({ foo: "World!" }) }
    );

    var router = new kendo.Router();

    router.route("/", function() {
        index.render("#app");
    });

    $(function() {
        router.start();
    });
</script>

有没有可能做这样的事情:

<div id="app"></div>

<script>
    var index = new kendo.View(
        "hello.html", // the path of the script element that contains the view markup
        { model: kendo.observable({ foo: "World!" }) }
    );

    var router = new kendo.Router();

    router.route("/", function() {
        index.render("#app");
    });

    $(function() {
        router.start();
    });
</script>

Answer 1

现在有一种方法可以做到这一点。这是有关如何执行此操作的文档:Kendo Remote Templates

这是它的要点:

1. 您需要制作一个基本上从文件中读取 html/字符串的模板加载器。 Kendo 没有在包装盒中提供一个，但这是他们在示例中使用的那个。( templateLoader.js )。将其包含在您的 html 页面中。

2. 将您的模板添加到单独的 html 文件中。您可以将多个模板存储在同一个文件中。但是，理想情况下，您应该只将模板放在那里。假设这是在文件 mytemplate.html 中

   <code><script id="index" type="text/x-kendo-template"></code>
       Hello <code><span data-bind="text: foo"></span></code>
   <code></script></code>
   

3. 在您的主 html 页面上，添加 <script>使用该模板文件调用模板加载器的 block 。这将/应该将模板注入(inject)您的主页，然后您应该能够像使用本地模板一样使用它。

   <code><script></code>
       templateLoader.loadExtTemplate("mytemplate.html");
   <code></script></code>