Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
  <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
  <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.flat.min.css" rel="stylesheet" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.mobile.min.js"></script>  
</head>
<body>  
  <!--Load Some Data-->
  <div id="peopleDefaultView"
    data-role="view"
    data-model="viewModel"
    data-layout="flat">
    <!--View-->
    <input type="text" data-bind="value: firstName" id="fName" />
    <input type="text" data-bind="value: lastName" id="lName" />
    <a data-bind="click: addName" data-role="button" id="btnOne">Add</a>
    <div style="margin-top: 10px">
      People List:
      <ul data-role="listview" data-template="people-l-template" data-bind="source: peopleList" id="pList"></ul>
    </div>
  </div>
  
  <!-- Kendo Template-->
  <script id="people-l-template" type="text/x-kendo-template">
      FirstName: <span>#:first#</span>
      LastName: <span>#:last#</span>
      <a data-bind="click: removeName" data-role="button" id="btnRemoveName" data-first="#:first#" data-last="#:last#">X</a>
  </script>
</body>
</html>
 
var viewModel = {
    firstName: null,
    lastName: null,
    peopleList: [],
    addName:  function (e) {
      var me = this;
      me.get("peopleList").push({
        first: me.get("firstName"),
        last: me.get("lastName")
      });
      me.set("firstName", '');
      me.set("lastName", '');
    },
    removeName: function (e) {
      var me = this;
      me.set("peopleList", jQuery.grep(me.peopleList, function (item, i) {
        return (item.first != e.target.data("first") && item.last != e.target.data("last"));
      }));
    }
};
​
var application = new kendo.mobile.Application(document.body);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers