All Components

MVVM / Source and template binding

Add a product

Name Price Units Delete

View source code:

<div id="example">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Units</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody data-template="row-template" data-bind="source: products"></tbody>
        <tfoot data-template="footer-template" data-bind="source: this"></tfoot>
    </table>

    <div>
        <span>Add a product</span>
        <ul>
            <li>
                <label>Name:<input type="text" placeholder="Enter name" data-bind="value: productName" /></label>
            </li>
            <li>
                <label>Price:<input type="number" placeholder="Enter number" data-bind="value: productPrice" /></label>
            </li>
            <li>
                <label>Units in stock:<input type="number" placeholder="Enter number" data-bind="value: productUnitsInStock" /></label>
            </li>
            <li>
                <button data-bind="click: addProduct">Add a new product</button>
            </li>
        </ul>
    </div>
</div>
<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: name">
        </td>
        <td data-bind="text: price" data-format="C">
            #: kendo.toString(get("price"), "C") #
        </td>
        <td data-bind="text: unitsInStock"></td>
        <td><button data-bind="click: deleteProduct">Delete</button></td>
    </tr>
</script>
<script id="footer-template" type="text/x-kendo-template">
    <tr>
        <td>
            Products count: #: total() #
        </td>
        <td>
            Total price: #: totalPrice() #
        </td>
        <td colspan="2">
            Units in stock: #: totalUnitsInStock() #
        </td>
    </tr>
</script>
        

View model source code:

var viewModel = kendo.observable({
    productName: "Product name",
    productPrice: 10,
    productUnitsInStock: 10,
    addProduct: function() {
        this.get("products").push({
            name: this.get("productName"),
            price: parseFloat(this.get("productPrice")),
            unitsInStock: parseFloat(this.get("productUnitsInStock"))
        });
    },
    deleteProduct: function(e) {
        // the current data item (product) is passed as the "data" field of the event argument
        var product = e.data;

        var products = this.get("products");

        var index = products.indexOf(product);

        // remove the product by using the splice method
        products.splice(index, 1);
    },
    total: function() {
        return this.get("products").length;
    },
    totalPrice: function() {
        var sum = 0;

        $.each(this.get("products"), function(index, product) {
            sum += product.price;
        });

        return sum;
    },
    totalUnitsInStock: function() {
        var sum = 0;

        $.each(this.get("products"), function(index, product) {
            sum += product.unitsInStock;
        });

        return sum;
    },
    products: [
        { name: "Hampton Sofa", price: 989.99, unitsInStock: 39 },
        { name: "Perry Sofa", price: 559.99, unitsInStock: 17 },
        { name: "Donovan Sofa", price: 719.99, unitsInStock: 29 },
        { name: "Markus Sofa", price: 839.99, unitsInStock: 3 }
    ]
});

kendo.bind($("#example"), viewModel);

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Source and template binding</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"> 
   <div class="demo-section k-content wide"> 
    <div class="box-col"> 
     <h4>Add a product</h4> 
     <ul class="options"> 
      <li> <label>Name:</label><input type="text" placeholder="Enter name" data-bind="value: productName" class="name k-textbox"> </li> 
      <li> <label>Price:</label><input type="text" placeholder="Enter number" data-bind="value: productPrice" class="k-textbox"> </li> 
      <li> <label>Units in stock:</label><input type="text" placeholder="Enter number" data-bind="value: productUnitsInStock" class="k-textbox"> </li> 
      <li> <button class="k-button" data-bind="click: addProduct">Add a new product</button> </li> 
     </ul> 
    </div> 
    <table id="products" class="metrotable"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Price</th> 
       <th>Units</th> 
       <th>Delete</th> 
      </tr> 
     </thead> 
     <tbody data-template="row-template" data-bind="source: products"> 
     </tbody> 
     <tfoot data-template="footer-template" data-bind="source: this"> 
     </tfoot> 
    </table> 
   </div> 
   <script id="row-template" type="text/x-kendo-template">
        <tr>
            <td data-bind="text: name">
            </td>
            <td data-bind="text: price" data-format="C">
            </td>
            <td data-bind="text: unitsInStock"></td>
            <td><button class="k-button" data-bind="click: deleteProduct">Delete</button></td>
        </tr>
    </script> 
   <script id="footer-template" type="text/x-kendo-template">
        <tr>
            <td>
                Products count: #: total() #
            </td>
            <td>
                Total price: #: totalPrice() #
            </td>
            <td colspan="2">
                Units in stock: #: totalUnitsInStock() #
            </td>
        </tr>
    </script> 
   <script>
    $(document).ready(function() {
        var viewModel = kendo.observable({
            productName: "Product name",
            productPrice: 10,
            productUnitsInStock: 10,
            addProduct: function() {
                this.get("products").push({
                    name: this.get("productName"),
                    price: parseFloat(this.get("productPrice")),
                    unitsInStock: parseFloat(this.get("productUnitsInStock"))
                });
            },
            deleteProduct: function(e) {
                // the current data item (product) is passed as the "data" field of the event argument
                var product = e.data;

                var products = this.get("products");

                var index = products.indexOf(product);

                // remove the product by using the splice method
                products.splice(index, 1);
            },
            total: function() {
                return this.get("products").length;
            },
            totalPrice: function() {
                var sum = 0;

                $.each(this.get("products"), function(index, product) {
                    sum += product.price;
                });

                return sum;
            },
            totalUnitsInStock: function() {
                var sum = 0;

                $.each(this.get("products"), function(index, product) {
                    sum += product.unitsInStock;
                });

                return sum;
            },
            products: [
                { name: "Hampton Sofa", price: 989.99, unitsInStock: 39 },
                { name: "Perry Sofa", price: 559.99, unitsInStock: 17 },
                { name: "Donovan Sofa", price: 719.99, unitsInStock: 29 },
                { name: "Markus Sofa", price: 839.99, unitsInStock: 3 }
            ]
        });

        kendo.bind($("#example"), viewModel);
    });
    </script> 
   <div class="box wide"> 
    <h4>View source code:</h4> 
    <pre class="prettyprint">
<div id="example">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Units</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody data-template="row-template" data-bind="source: products"></tbody>
        <tfoot data-template="footer-template" data-bind="source: this"></tfoot>
    </table>

    <div>
        <span>Add a product</span>
        <ul>
            <li>
                <label>Name:<input type="text" placeholder="Enter name" data-bind="value: productName" /></label>
            </li>
            <li>
                <label>Price:<input type="number" placeholder="Enter number" data-bind="value: productPrice" /></label>
            </li>
            <li>
                <label>Units in stock:<input type="number" placeholder="Enter number" data-bind="value: productUnitsInStock" /></label>
            </li>
            <li>
                <button data-bind="click: addProduct">Add a new product</button>
            </li>
        </ul>
    </div>
</div>
<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: name">
        </td>
        <td data-bind="text: price" data-format="C">
            #: kendo.toString(get("price"), "C") #
        </td>
        <td data-bind="text: unitsInStock"></td>
        <td><button data-bind="click: deleteProduct">Delete</button></td>
    </tr>
</script>
<script id="footer-template" type="text/x-kendo-template">
    <tr>
        <td>
            Products count: #: total() #
        </td>
        <td>
            Total price: #: totalPrice() #
        </td>
        <td colspan="2">
            Units in stock: #: totalUnitsInStock() #
        </td>
    </tr>
</script>
        </pre> 
    <h4 style="padding-top: 2em;">View model source code:</h4> 
    <pre class="prettyprint">
var viewModel = kendo.observable({
    productName: "Product name",
    productPrice: 10,
    productUnitsInStock: 10,
    addProduct: function() {
        this.get("products").push({
            name: this.get("productName"),
            price: parseFloat(this.get("productPrice")),
            unitsInStock: parseFloat(this.get("productUnitsInStock"))
        });
    },
    deleteProduct: function(e) {
        // the current data item (product) is passed as the "data" field of the event argument
        var product = e.data;

        var products = this.get("products");

        var index = products.indexOf(product);

        // remove the product by using the splice method
        products.splice(index, 1);
    },
    total: function() {
        return this.get("products").length;
    },
    totalPrice: function() {
        var sum = 0;

        $.each(this.get("products"), function(index, product) {
            sum += product.price;
        });

        return sum;
    },
    totalUnitsInStock: function() {
        var sum = 0;

        $.each(this.get("products"), function(index, product) {
            sum += product.unitsInStock;
        });

        return sum;
    },
    products: [
        { name: "Hampton Sofa", price: 989.99, unitsInStock: 39 },
        { name: "Perry Sofa", price: 559.99, unitsInStock: 17 },
        { name: "Donovan Sofa", price: 719.99, unitsInStock: 29 },
        { name: "Markus Sofa", price: 839.99, unitsInStock: 3 }
    ]
});

kendo.bind($("#example"), viewModel);
</pre> 
   </div> 
   <style>
        .demo-section {
        	min-height: 200px;
        }
        .metrotable > tbody > tr > td  {
        	font-size: 12px;
        }
        .metrotable > thead > tr > th {
        	font-size: 14px;
        	padding-top: 0;
        }

        .metrotable > tfoot > tr > td {
        	padding-right: 10px;
        }

        .box-col label {
            display: inline-block;
            width: 95px;
        }
        .code-sample {
            clear: right;
        }
        
        .prettyprint {
            background-color: #fff;
            border: 1px solid #ccc;
            overflow: auto;
            padding: 5px;
        }
    </style> 
  </div>   
 </body>
</html>