All Components

DataSource / Binding to XML

    Information

    This example is bound to XML in the following format:

    XML Format

    <book cover="javascript-the-good-parts.png">
        <title>JavaScript: The Good Parts</title>
        <author>Douglas Crockford</author>
        <url>http://www.amazon.com/…</url>
    </book>

    » See the full XML

    HTML5/JavaScript 源码

    <!DOCTYPE html>
    <html>
     <head> 
      <title>Binding to XML</title> 
      <meta charset="utf-8"> 
      <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
      <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
      <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
      <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
      <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
      <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
      <script src="../../js/jquery.min.js"></script> 
      <script src="../../js/kendo.all.min.js"></script> 
      <script src="../content/shared/js/console.js"></script> 
      <script>
            
        </script> 
     </head> 
     <body> 
      <a class="offline-button" href="../index.html">Back</a> 
      <div id="example"> 
       <ul id="books"></ul> 
       <script id="template" type="text/x-kendo-template">
                    <li class="book">
                        <a href="#= url #"><img src="../content/web/datasource/xml-data/#= cover #" /></a>
                        <h3>#= title #</h3>
                        by #= author #
                    </li>
                </script> 
       <script>
                    $(document).ready(function() {
                        function onChage() {
                            $("#books").html(kendo.render(template, this.view()));
                        }
    
                        // create a template using the above definition
                        var template = kendo.template($("#template").html());
    
                        var dataSource = new kendo.data.DataSource({
                            transport: {
                                // specify the XML file to read. The same as read: { url: "books.xml" }
                                read: "../content/web/datasource/books.xml"
                            },
                            schema: {
                                // specify the the schema is XML
                                type: "xml",
                                // the XML element which represents a single data record
                                data: "/books/book",
                                // define the model - the object which will represent a single data record
                                model: {
                                    // configure the fields of the object
                                    fields: {
                                        // the "title" field is mapped to the text of the "title" XML element
                                        title: "title/text()",
                                        // the "author" field is mapped to the text of the "author" XML element
                                        author: "author/text()",
                                        // the "url" field is mapped to the text of the "url" XML element
                                        url: "url/text()",
                                        // the "cover" field is mapped to the "id" attribute of the "book" XML element
                                        cover: "cover"
                                    }
                                }
                            },
                            change: onChage
                        });
    
                        dataSource.read();
                    });
                </script> 
       <style>
                    #books {
                        list-style-type: none;
                        margin: 0;
                        padding: 0;
                    }
    
                    #books:after {
                        content: ".";
                        display: block;
                        clear: both;
                        height: 0;
                        visibility: hidden;
                    }
    
                    .book {
                        float:left;
                        width: 28%;
                        height:240px;
                        text-align: center;
                        padding: 0 1em;
                    }
    
                    .book h3 {
                        margin-bottom: 0;
                    }
    
                    .book a {
                        display: inline-block;
                        max-width: 128px;
                        margin-bottom: 1em;
                        -webkit-border-radius: 8px;
                        -moz-border-radius: 8px;
                        border-radius: 8px;
                        box-shadow: 0 0 4px #CCCCFF;
                        border: 5px solid transparent;
                    }
    
                    .book a:hover {
                        border-color: #e26b1d;
                    }
    
                    .book img {
                        vertical-align: middle;
                        border: 0;
                        max-width: 100%;
                        -webkit-border-radius: 3px;
                        -moz-border-radius: 3px;
                        border-radius: 3px;
                    }
                    #example h4 {
                        width: auto;
                    }
                    pre.prettyprint {
                        height: auto;
                    }
                </style> 
       <div class="box wide"> 
        <h4>Information</h4> 
        <p>This example is bound to XML in the following format:</p> 
        <h4 style="padding-top: 2em;">XML Format</h4> 
        <pre class="prettyprint"><code><book cover="javascript-the-good-parts.png">
        <title>JavaScript: The Good Parts</title>
        <author>Douglas Crockford</author>
        <url>http://www.amazon.com/…</url>
    </book></code></pre> 
        <br> 
        <a href="../content/web/datasource/books.xml">» See the full XML</a> 
       </div> 
      </div> 
      <div class="demo-section"> 
       <h3>Note:</h3> 
       <p> Security restrictions prevent this example from working in all browsers when the page is loaded from the file system (via file:// protocol). If the demo is not working as expected, please host the Kendo folder on a web server. </p> 
      </div>   
     </body>
    </html>