הלינקייה: מגזין חודשי למפתחים

רוצה לשמוע על כל האירועים, המדריכים, הקורסים והמאמרים שנכתבו החודש ?
הלינקייה הינו מגזין חופשי בעברית שמשאיר אותך בעניינים.
בלי ספאם. בלי שטויות. פעם בחודש אצלך בתיבה.

Ajax

08 ajax from Ynon Perek

Backbone from Ynon Perek

A fully functional server for this exercise is available at base url:
http://ajaxexample-ynonp.dotcloud.com/ex4/user

Provide a way to change the data and post back to the server. Use HTTP GET
to fetch and HTTP POST to change data

Handlebars Demo

JavaScript File

(function (global) {

  var template_text = $('#tmpl-entry').html();
  var _template     = Handlebars.compile( template_text );

  $('form').on('submit', function() {
    return false;
  });

  var render = function(data) {
    var result = _template( data );
    $('#result').html( result );
  };

  $('#btn-refresh').on('click', function() {
    $.get('/data.json', render );

  });



}(this));

HTML File

<!DOCTYPE html>
<html>
<head>
  <title>Hello Bob</title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
</head>
<body>
  <div class="container">
    <form action="#">
      <div id="result"></div>

      <button id="btn-refresh">Get Data</button>
    </form>

  </div>

  <script type="text/template" id="tmpl-entry">
    <div>
      <label>Name</label>
      <input type="text" id="name" value="{{name}}"/>
    </div>

    <div>
      <label>Age</label>
      <input type="text" id="age" value="{{age}}"/>
    </div>

    <ul>
      {{#each likes}}
      <li style="color: {{this.color}}">{{this.name}}</li>
      {{/each}}
    </ul>

  </script>



  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="app.js"></script>
</body>
</html>