All Components

MVVM / Basic usage

Thank you for your registration,

  • I have read the licence agreement

Current view model state:

    {
        firstName: ,
        lastName: ,
        gender: ,
        agreed: 
    }
            

View source code:

    <div>
        Thank you for your registration, <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
        <br /><br />
        <button data-bind="click: startOver">Start Over</button>
    </div>
    <div class="demo-section k-content">
        <form>
            <label>First Name: <input data-bind="value: firstName" /></label>
            <label>Last Name: <input data-bind="value: lastName" /></label>
            <label>Gender:
                <select data-bind="source: genders, value: gender"></select>
            </label>
            <label><input type="checkbox" data-bind="checked: agreed" /> I have read the licence agreement</label>
            <button data-bind="enabled: agreed, click: register">Register</button>
            <div data-bind="visible: confirmed">
        
            </div>
        </form>
    </div>
        

View model source code:

    var viewModel = kendo.observable({
        firstName: "John",
        lastName: "Doe",
        genders: ["Male", "Female"],
        gender: "Male",
        agreed: false,
        confirmed: false,
        register: function(e) {
            e.preventDefault();

            this.set("confirmed", true);
        },
        startOver: function() {
            this.set("confirmed", false);
            this.set("agreed", false);
            this.set("gender", "Male");
            this.set("firstName", "John");
            this.set("lastName", "Doe");
        }
    });

    kendo.bind($("form"), viewModel);
        

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Basic usage</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" data-bind="visible: confirmed">
     Thank you for your registration, 
    <span data-bind="text: firstName"></span> 
    <span data-bind="text: lastName"></span> 
    <br>
    <br> 
    <button data-bind="click: startOver" class="k-button k-primary">Start Over</button> 
   </div> 
   <div class="demo-section k-content wide"> 
    <div> 
     <form> 
      <ul id="fieldlist"> 
       <li><label for="fname">First Name:</label> <input id="fname" data-bind="value: firstName" class="k-textbox"></li> 
       <li><label for="lname">Last Name:</label> <input id="lname" data-bind="value: lastName" class="k-textbox"></li> 
       <li><label for="gender">Gender:</label> <select id="gender" data-bind="source: genders, value: gender"></select></li> 
       <li> <label for="agree">License Agreement</label> <input type="checkbox" id="agree" data-bind="checked: agreed"> I have read the licence agreement</li> 
      </ul> 
      <button data-bind="enabled: agreed, click: register" class="k-button k-primary">Register</button> 
     </form> 
    </div> 
    <div> 
     <h4>Current view model state:</h4> 
     <pre>
    {
        firstName: <span data-bind="text: firstName"></span>,
        lastName: <span data-bind="text: lastName"></span>,
        gender: <span data-bind="text: gender"></span>,
        agreed: <span data-bind="text: agreed"></span>
    }
            </pre> 
    </div> 
   </div> 
   <script>
        $(document).ready(function() {
            var viewModel = kendo.observable({
                firstName: "John",
                lastName: "Doe",
                genders: ["Male", "Female"],
                gender: "Male",
                agreed: false,
                confirmed: false,
                register: function(e) {
                    e.preventDefault();

                    this.set("confirmed", true);
                },
                startOver: function() {
                    this.set("confirmed", false);
                    this.set("agreed", false);
                    this.set("gender", "Male");
                    this.set("firstName", "John");
                    this.set("lastName", "Doe");
                }
            });

            kendo.bind($("#example"), viewModel);
        });
    </script> 
   <div class="box wide"> 
    <h4>View source code:</h4> 
    <pre class="prettyprint">
    <div>
        Thank you for your registration, <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
        <br /><br />
        <button data-bind="click: startOver">Start Over</button>
    </div>
    <div class="demo-section k-content">
        <form>
            <label>First Name: <input data-bind="value: firstName" /></label>
            <label>Last Name: <input data-bind="value: lastName" /></label>
            <label>Gender:
                <select data-bind="source: genders, value: gender"></select>
            </label>
            <label><input type="checkbox" data-bind="checked: agreed" /> I have read the licence agreement</label>
            <button data-bind="enabled: agreed, click: register">Register</button>
            <div data-bind="visible: confirmed">
        
            </div>
        </form>
    </div>
        </pre> 
    <h4 style="padding-top: 2em;">View model source code:</h4> 
    <pre class="prettyprint">
    var viewModel = kendo.observable({
        firstName: "John",
        lastName: "Doe",
        genders: ["Male", "Female"],
        gender: "Male",
        agreed: false,
        confirmed: false,
        register: function(e) {
            e.preventDefault();

            this.set("confirmed", true);
        },
        startOver: function() {
            this.set("confirmed", false);
            this.set("agreed", false);
            this.set("gender", "Male");
            this.set("firstName", "John");
            this.set("lastName", "Doe");
        }
    });

    kendo.bind($("form"), viewModel);
        </pre> 
   </div> 
   <style>        
        .demo-section > div {
            float: left;
            margin-bottom: 2em;
        }
        #fieldlist {
            margin: 0;
            padding: 0;
        }

        #fieldlist li {
            list-style: none;
            padding-bottom: 1.5em;
            text-align: left;
        }

        #fieldlist label {
            display: block;
            padding-bottom: .3em;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 12px;
        }
        .prettyprint {
            background-color: #fff;
            border: 1px solid #ccc;
            overflow: auto;
            padding: 5px;
        }
    </style> 
  </div>   
 </body>
</html>