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>Backbone two-ways bindings</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
</head>
<body>
  <input type=number id=celsius>℃
  ⟷
  <input type=number id=fahrenheit>℉
</body>
</html>
 
​
function c2f(c) {
  return 9/5 * c + 32;
}
​
function f2c(f) {
  return 5/9 * (f - 32);
}
​
var Temperature = Backbone.Model.extend({
    defaults: {
        celsius: 0,
      fahrenheit: 0
    }
});
​
​
var TemperatureView = Backbone.View.extend({
  el: document.body,
  model: new Temperature(),
  events: {
    "input": "update"
  },
  initialize: function() {
    this.convert = {
      celsius: {
        f: c2f,
        target: 'fahrenheit'
      },
      fahrenheit: {
        f: f2c,
        target: 'celsius'
      }
    };
    this.render();
  },
  render: function () {
    this.$('#celsius').val(this.model.get('celsius'));
    this.$('#fahrenheit').val(this.model.get('fahrenheit'));
  },
  update: function (event) {
    var id = event.target.id,
        value = event.target.value,
        converted = this.convert[id].f(value),
        target = this.convert[id].target;
    
    this.model.set(id, value);
    this.model.set(target, converted);
    this.$('#' + target).val(converted);
  }
});
​
var temperatureView = new TemperatureView();
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers