A Pen by Zach.

A-Pen-by-Zach.markdown

Native Event Binding using Setters

A Pen by Zach on CodePen.

License.

index.html

  <input id="zb-input" required value="" placeholder="Enter your name">

<br />

<h4>Current Name: <span id="zb-output"></span>
</h4>

input_view.js

var app = app || {};

(function(){
  "use strict";

  var inputView = {
    
    template: document.getElementById('zb-input'),
    
    model: app.userModel,
    
  };
  
  function handleInput(e) {
    this.model.name = e.srcElement.value;
  }
    
  inputView.template.addEventListener("keyup", handleInput.bind(inputView));
  app.inputView = inputView;
})();

output_view.js

var app = app || {};

(function(){
  "use strict";

  var outputView = { 

    template: document.getElementById('zb-output'),

    model: app.userModel,

    render: function() {
      this.template.innerText = this.model.name;
    },
  };

  outputView.model.onNameChange(outputView.render.bind(outputView));
  app.outputView = outputView;
})();

user_model.js

var app = app || {};

(function(){
  "use strict";

  var _name = "default value";
  var listeners = [];

  var userModel = {
    
    onNameChange: function(fun) {
      listeners.push(fun);
    },
    
    notifyListeners: function(value, model) {
      listeners.forEach(function(listener) {
        listener.call(this, value, model);
      });
    },
  };
  
  Object.defineProperties(userModel, {
    name: {
      get: function() {
        return _name;
      },
      set: function(name) {
        _name = name;
        this.notifyListeners(name, userModel);
      },
    },
  });

  app.userModel= userModel;
})();

Note that unlike Backbone models, we can trigger change events by setting an attribute via =

https://gist.github.com/theotherzach/8501387#file-user_model-js-L22-L32
https://gist.github.com/theotherzach/8501387#file-input_view-js-L14-L16

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty