rasti 2.0.0-alpha.0 → 2.0.0-alpha.10

package/es/Component.js

@@ -1,7 +1,7 @@
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-import View from './View';
+import View from './View.js';
 
 // This options keys will be extended on view instance.
 var componentOptions = {
@@ -17,16 +17,24 @@ var componentOptions = {
  * @param text {string} html text
  * @return {object} Object with keys / values representing attributes.
  */
-var getAttributes = function getAttributes(text) {
+var extractAttributes = function extractAttributes(text) {
   var attributes = {};
-  var re = /([a-z]+)=?(\S+)?/gi;
+  var re = /([\w|data-]+)(?:=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?)?/g;
   var result;
   while ((result = re.exec(text)) !== null) {
-    attributes[result[1]] = result[2] ? result[2].replace(/'|"/g, '') : true;
+    attributes[result[1]] = typeof result[2] === 'undefined' ? true : result[2];
   }
   return attributes;
 };
 
+/*
+ * Helper function. If first arg is a placeholder for an expression, return the expression.
+ */
+var getExpression = function getExpression(placeholder, expressions) {
+  var match = placeholder && placeholder.match && placeholder.match(new RegExp(Component.EXPRESSION_PLACEHOLDER_TEMPLATE('(\\d+)')));
+  return match && match[1] ? expressions[match[1]] : placeholder;
+};
+
 /*
  * Helper function. If expression is a function, call it with context and args.
  */
@@ -41,14 +49,21 @@ var evalExpression = function evalExpression(expression, context) {
  * Components are a special kind of `View` that is designed to be easily composable, 
  * making it simple to add child views and build complex user interfaces.<br />
  * Unlike views, which are render-agnostic, components have a specific set of rendering 
- * guidelines that allow for a more declarative development style.
+ * guidelines that allow for a more declarative development style.<br />
+ * Components are defined with the `create` static method, which takes a tagged template.
  * @module
+ * @extends Rasti.View
  * @param {object} options Object containing options. The following keys will be merged to `this`: model, state, key, onDestroy, onRender, onCreate, onChange.
+ * @property {string} key A unique key to identify the component. Used to recycle child components.
+ * @property {object} model A `Rasti.Model` or any emitter object containing data and business logic.
+ * @property {object} state A `Rasti.Model` or any emitter object containing data and business logic, to be used as internal state.
  * @example
  * import { Component, Model } from 'rasti';
  * // Create Timer component.
  * const Timer = Component.create`
- *    <div>Seconds: <span>${({ model }) => model.seconds}</span></div>
+ *     <div>
+ *         Seconds: <span>${({ model }) => model.seconds}</span>
+ *     </div>
  * `;
  * // Create model to store seconds.
  * const model = new Model({ seconds: 0 });
@@ -72,8 +87,9 @@ var Component = /*#__PURE__*/function (_View) {
     // Ensure id.
     _this.id = _this.attributes.id ?
     // If id is provided, evaluate it.
-    evalExpression(_this.attributes.id, _assertThisInitialized(_this), _assertThisInitialized(_this)) : // Generate a unique id and set it as id attribute.
-    "rasti-component-" + _this.uid;
+    evalExpression(_this.attributes.id, _assertThisInitialized(_this), _assertThisInitialized(_this)) :
+    // Generate a unique id and set it as id attribute.
+    Component.ID_TEMPLATE(_this.uid);
     // Bind onChange to this to be used as listener.
     // Store bound version, so it can be removed on onDestroy method.
     _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
@@ -93,29 +109,81 @@ var Component = /*#__PURE__*/function (_View) {
   _proto.ensureElement = function ensureElement() {
     // If el is provided, delegate events.
     if (this.el) this.delegateEvents();
-  };
+  }
+
+  /*
+   * Find view's element on parent node, using id.
+   */;
   _proto.findElement = function findElement(parent) {
     return (parent || document).querySelector("#" + this.id);
   }
 
   /*
-   * Used internally on the render process. Attach the view to the dom element.
+   * Eval attributes expressions.
    */;
-  _proto.hydrate = function hydrate(parent) {
+  _proto.getAttributes = function getAttributes() {
     var _this2 = this;
+    var add = {};
+    var remove = {};
+    var attrs = [];
+    Object.keys(this.attributes).forEach(function (key) {
+      if (key === 'id') return;
+      // Evaluate attribute value.
+      var value = evalExpression(_this2.attributes[key], _this2, _this2);
+
+      // Transform bool attribute values
+      if (value === false) {
+        remove[key] = true;
+      } else if (value === true) {
+        add[key] = '';
+        attrs.push(key);
+      } else {
+        if (value === null || typeof value === 'undefined') value = '';
+        add[key] = value;
+        attrs.push(key + "=\"" + value + "\"");
+      }
+    });
+    add.id = this.id;
+    attrs.push("id=\"" + this.id + "\"");
+    return {
+      add: add,
+      remove: remove,
+      html: attrs.join(' ')
+    };
+  }
+
+  /*
+   * Used internally on the render process.
+   * Attach the view to the dom element.
+   */;
+  _proto.hydrate = function hydrate(parent) {
+    var _this3 = this;
     this.el = this.findElement(parent);
     this.delegateEvents();
     this.children.forEach(function (child) {
-      return child.hydrate(_this2.el);
+      return child.hydrate(_this3.el);
     });
-    this.onRender.call(this);
+    this.onRender.call(this, 'hydrate');
+  }
+
+  /*
+   * Used internally on the render process.
+   * Reuse a view that has `key` when its parent is rendered.
+   */;
+  _proto.recycle = function recycle(parent) {
+    // Find element to be replaced. It has same id.
+    var toBeReplaced = this.findElement(parent);
+    // Replace it with this.el.
+    toBeReplaced.replaceWith(this.el);
+    // Call `onRender` lifecycle method.
+    this.onRender.call(this, 'recycle');
   }
 
   /*
    * Override. Add some custom logic to super `destroy` method.
    */;
-  _proto.destroy = function destroy(options) {
-    _View.prototype.destroy.call(this, options);
+  _proto.destroy = function destroy() {
+    _View.prototype.destroy.apply(this, arguments);
     // Stop listening to `change`.
     // Set destroyed flag to prevent a last render after destroyed. TODO: Review
     if (this.model) this.model.off('change', this.onChange);
@@ -135,9 +203,9 @@ var Component = /*#__PURE__*/function (_View) {
    * This method should be extended with custom logic.
    * Maybe comparing new attributes with previous ones and calling
    * render when needed. Or doing some dom transformation.
-   * @param model {Rasti.Model}
-   * @param key {string}
-   * @param value {any}
+   * @param model {Rasti.Model} The model that emitted the event.
+   * @param changed {object} Object containing keys and values that has changed.
+   * @param [...args] {any} Any extra arguments passed to set method.
    */;
   _proto.onChange = function onChange() {
     this.render();
@@ -145,131 +213,139 @@ var Component = /*#__PURE__*/function (_View) {
 
   /**
    * Lifecycle method. Called when the view is rendered.
+   * @param type {string} The render type. Can be `render`, `hydrate` or `recycle`.
    */;
   _proto.onRender = function onRender() {}
 
   /**
    * Lifecycle method. Called when the view is destroyed.
+   * @param {object} options Options object or any arguments passed to `destroy` method.
    */;
   _proto.onDestroy = function onDestroy() {}
 
   /*
    * Replace expressions.
    */;
-  _proto.replaceExpressions = function replaceExpressions(string, parseExpressionResult) {
-    var _this3 = this;
-    return string.replace(/{(\d+)}/g, function (match) {
-      // Get expression index.
-      var idx = match.match(/{(\d+)}/)[1];
+  _proto.replaceExpressions = function replaceExpressions(string, addChild) {
+    var _this4 = this;
+    return string.replace(new RegExp(Component.EXPRESSION_PLACEHOLDER_TEMPLATE('(\\d+)'), 'g'), function (match) {
+      var expression = getExpression(match, _this4.template.expressions);
       // Eval expression. Pass view as argument.
-      var result = _this3.template.expressions[idx].call(_this3, _this3);
+      var result = evalExpression(expression, _this4, _this4);
       // Treat all expressions as arrays.
       var results = result instanceof Array ? result : [result];
       // Replace expression with the result of the evaluation.
-      return results.reduce(function (out, current) {
+      return results.reduce(function (out, result) {
+        var parsed;
+        // If result is true, replace it with a placeholder.
+        if (result === true) parsed = Component.TRUE_PLACEHOLDER;
+        // If result is false, replace it with a placeholder.
+        else if (result === false) parsed = Component.FALSE_PLACEHOLDER;
+        // Replace null or undefined with empty string.
+        else if (result === null || typeof result === 'undefined') parsed = '';
+        // If result is a view, call addChild callback.
+        else if (result && typeof result.render === 'function') parsed = addChild(result);
+        // Return expression itself.
+        else parsed = result;
         // Concatenate expressions.
-        out += parseExpressionResult(current);
-        return out;
+        return out + parsed;
       }, '');
     })
     // Replace `attribute="true"` with `attribute`
-    .replace(/([a-z]+)=["|']true["|']/g, '$1')
-    // Replace `attribute="false"` with ``
-    .replace(/([a-z]+)=["|']false["|']/g, '');
+    .replace(new RegExp("([a-z]+)=[\"|']" + Component.TRUE_PLACEHOLDER + "[\"|']", 'g'), '$1')
+    // Replace `attribute="false"` with empty string.
+    .replace(new RegExp("([a-z]+)=[\"|']" + Component.FALSE_PLACEHOLDER + "[\"|']", 'g'), '')
+    // Replace rest of false expressions with empty string.
+    .replace(new RegExp(Component.FALSE_PLACEHOLDER, 'g'), '');
   }
 
   /*
    * Treat the whole view as a HTML string.
    */;
   _proto.toString = function toString() {
-    var _this4 = this;
+    var _this5 = this;
     // Normally there won't be any children, but if there are, destroy them.
     this.destroyChildren();
-    // Add id to template including root element (this.el) as part of it.
-    var tpl = this.attributes.id ? this.template.outer : this.template.outer.replace(/^<([a-z]+)/, "<$1 id=\"" + this.id + "\"");
     // Replace expressions.
-    return this.replaceExpressions(tpl, function (result) {
-      var out = result;
-      // Return empty string if result is null or undefined.
-      if (result === null || typeof result === 'undefined') out = '';
-      // If result is a view, add it to children array.
-      else if (result && typeof result.render === 'function') {
-        // Add child component.
-        _this4.addChild(result);
-      }
-      return out;
+    var inner = this.template.inner && this.replaceExpressions(this.template.inner, function (component) {
+      // Add child component.
+      return _this5.addChild(component);
     });
+    // Generate outer template.
+    return inner ? "<" + this.tag + " " + this.getAttributes().html + ">" + inner + "</" + this.tag + ">" : "<" + this.tag + " " + this.getAttributes().html + " />";
   }
 
   /*
    * View render method.
    */;
   _proto.render = function render() {
-    var _this5 = this;
+    var _this6 = this;
     // Prevent a last re render if view is already destroyed.
     if (this.destroyed) return this;
-    // If "this.el" is not present,
-    // create a new element according "this.tag"
-    // and "this.attributes".
+    // If `this.el` is not present, create a new `this.tag` element.
     if (!this.el) {
       this.el = this.createElement(this.tag);
       this.delegateEvents();
     }
     // Set `this.el` attributes.
-    Object.keys(this.attributes).forEach(function (key) {
-      // Omit changing id.
-      if (key === 'id') return;
-      // Evaluate attribute value.
-      var value = evalExpression(_this5.attributes[key], _this5, _this5);
-      // Transform bool attribute values
-      if (value === false) {
-        // Remove false attributes.
-        _this5.el.removeAttribute(key);
-      } else {
-        if (value === true) value = '';
-        _this5.el.setAttribute(key, value);
-      }
+    var attributes = this.getAttributes();
+    // Remove attributes.
+    Object.keys(attributes.remove).forEach(function (key) {
+      _this6.el.removeAttribute(key);
     });
-    var previousChildren = this.children;
-    this.children = [];
-    var nextChildren = [];
-    var recycledChildren = [];
-
-    // Replace expressions.
-    // Set html text inside `this.el`. Make it part of the dom.
-    this.el.innerHTML = this.replaceExpressions(this.template.inner, function (result) {
-      var out = result;
-      // Return empty string if result is null or undefined.
-      if (result === null || typeof result === 'undefined') out = '';
-
-      // If result is a view, add it to children array.
-      else if (result && typeof result.render === 'function') {
-        var found = result.key && previousChildren.find(function (previousChild) {
-          return previousChild.key === result.key;
+    // Add attributes.
+    Object.keys(attributes.add).forEach(function (key) {
+      _this6.el.setAttribute(key, attributes.add[key]);
+    });
+    // Check for `template.inner` to see if view has innerHTML.
+    if (this.template.inner) {
+      var previousChildren = this.children;
+      this.children = [];
+      var nextChildren = [];
+      var recycledChildren = [];
+      // Store active element.
+      var activeElement = document.activeElement;
+      // Replace expressions. Set html inside of `this.el`.
+      this.el.innerHTML = this.replaceExpressions(this.template.inner, function (component) {
+        var out = component;
+        // Check if child already exists.
+        var found = component.key && previousChildren.find(function (previousChild) {
+          return previousChild.key === component.key;
         });
         if (found) {
-          out = "<" + found.tag + " id=\"" + evalExpression(found.id, found, found) + "\"></" + found.tag + ">";
+          // If child already exists, replace it html by its root element.
+          out = "<" + found.tag + " id=\"" + found.id + "\"></" + found.tag + ">";
+          // Add child to recycled children.
           recycledChildren.push(found);
-          result.destroy();
+          // Destroy new child component. Use recycled one instead.
+          component.destroy();
         } else {
-          nextChildren.push(result);
+          // Not found. Add new child component.
+          nextChildren.push(component);
         }
+        // Component html.
+        return out;
+      });
+      // Add new children. Hydrate them.
+      nextChildren.forEach(function (nextChild) {
+        _this6.addChild(nextChild).hydrate(_this6.el);
+      });
+      // Replace children root elements with recycled components.
+      recycledChildren.forEach(function (recycledChild) {
+        _this6.addChild(recycledChild).recycle(_this6.el);
+      });
+      // Destroy unused children.
+      previousChildren.forEach(function (previousChild) {
+        var found = recycledChildren.indexOf(previousChild) > -1;
+        if (!found) previousChild.destroy();
+      });
+      // Restore focus.
+      if (this.el.contains(activeElement)) {
+        activeElement.focus();
       }
-      return out;
-    });
-    nextChildren.forEach(function (nextChild) {
-      _this5.addChild(nextChild).hydrate(_this5.el);
-    });
-    recycledChildren.forEach(function (recycledChild) {
-      _this5.el.replaceChild(_this5.addChild(recycledChild).el, recycledChild.findElement(_this5.el));
-    });
-    previousChildren.forEach(function (previousChild) {
-      var found = recycledChildren.indexOf(previousChild) > -1;
-      if (!found) previousChild.destroy();
-    });
-
+    }
     // Call onRender lifecycle method.
-    this.onRender.call(this);
+    this.onRender.call(this, 'render');
     // Return this for chaining.
     return this;
   }
@@ -301,7 +377,7 @@ var Component = /*#__PURE__*/function (_View) {
    * @param {object} options The view options.
    * @param {node} el Dom element to append the view element.
    * @param {boolean} hydrate If true, the view will use existing html.
-   * @return {Rasti.View}
+   * @return {Rasti.Component}
    */;
   Component.mount = function mount() {
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -309,7 +385,6 @@ var Component = /*#__PURE__*/function (_View) {
     var hydrate = arguments.length > 2 ? arguments[2] : undefined;
     // Instantiate view.
     var view = new this(options);
-
     // If `el` is passed, mount component.
     if (el) {
       if (hydrate) {
@@ -323,12 +398,23 @@ var Component = /*#__PURE__*/function (_View) {
       }
       view.hydrate(el);
     }
+    // Return view instance.
     return view;
   }
   /**
-   * Tagged template that receives an HTML string, 
-   * and returns a `Component`.
+   * Takes a tagged template containing an HTML string, 
+   * and returns a new `Component` class.
+   * - The template outer tag and attributes will be used to create the view's root element.
+   * - Boolean attributes should be passed in the form of `attribute="${() => true}"`.
+   * - Event handlers should be passed, at the root element, in the form of `onEventName=${{'selector' : listener }}`. Where `selector` is a css selector. The event will be delegated to the view's root element.
+   * - The template inner HTML will be used as the view's template.
+   * - Template interpolations that are functions will be evaluated on the render process. Receiving the view instance as argument. And being bound to it.
+   * - If the function returns `null`, `undefined`, `false` or empty string, the interpolation won't render any content.
+   * - If the function returns a component instance, it will be added as a child component.
+   * - If the function returns an array, each item will be evaluated as above.
    * @static
+   * @param {string} HTML template for the component.
+   * @return {Rasti.Component}
    */;
   Component.create = function create(strings) {
     for (var _len2 = arguments.length, expressions = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
@@ -342,25 +428,26 @@ var Component = /*#__PURE__*/function (_View) {
       parts.push(string);
       // Add expression placeholder for later or expression eval.
       if (expressions[i]) {
-        parts.push(typeof expressions[i] === 'function' || typeof expressions[i] === 'object' ? "{" + i + "}" : expressions[i]);
+        parts.push(typeof expressions[i] === 'function' || typeof expressions[i] === 'object' ? Component.EXPRESSION_PLACEHOLDER_TEMPLATE(i) : expressions[i]);
       }
     });
     // Create output text for main template.
     var main = parts.join('').trim().replace(/\n/g, '');
     // Extract outer tag, attributes and inner html.
-    var result = main.match(/^<([a-z]+)(.*?)>(.*)<\/\1>$/);
-    // Remove events listeners.
-    var string = main.replace(/on([A-Z]{1}[a-z]+)+=[^>\s]+/g, '');
+    var result = main.match(/^<([a-z]+)(.*?)>(.*)<\/\1>$/) || main.match(/^<([a-z]+)(.*?)\/>$/);
     // Parse attributes from html text into an object.
-    var attributes = getAttributes(result[2]);
+    var attributes = extractAttributes(result[2]);
+    // Events to be delegated.
     var events = {};
-    // Filter events. Replace placeholders `{number}` with expressions.
+    // Filter events. To generate events object.
+    // Generate attributes object, replace placeholders with expressions.
     attributes = Object.keys(attributes).reduce(function (out, key) {
-      var matchKey = key.match(/on(([A-Z]{1}[a-z]+)+)/); // Is Event?
-      var matchValue = attributes[key].match(/{(\d+)}/); // Is placeholder for function or object?
+      // Is Event?
+      var matchKey = key.match(/on(([A-Z]{1}[a-z]+)+)/);
+      // Is placeholder for function or object?
       // Get expression or value.
-      var value = matchValue && matchValue[1] ? expressions[matchValue[1]] : attributes[key];
-      // Is event handler.
+      var value = getExpression(attributes[key], expressions);
+      // Is event handler. Add to events object.
       if (matchKey && matchKey[1]) {
         var eventType = matchKey[1].toLowerCase();
         Object.keys(value).forEach(function (selector) {
@@ -368,22 +455,19 @@ var Component = /*#__PURE__*/function (_View) {
         });
         return out;
       }
-      // Is function expression.
+      // Is attribute. Add to attributes object.
       out[key] = value;
       return out;
     }, {});
     var Current = this;
-
     // Create subclass for this component.
     return Current.extend({
       // Set events.
       events: events,
       // Set attributes.
       attributes: attributes,
-      // Set template data.
+      // Set template.
       template: {
-        // Template including root element (this.el) as part of the template.
-        outer: string,
         // Template for innerHTML of root element.
         inner: result[3],
         // Template expressions.
@@ -395,4 +479,12 @@ var Component = /*#__PURE__*/function (_View) {
   };
   return Component;
 }(View);
-export { Component as default };
+export { Component as default };
+Component.ID_TEMPLATE = function (uid) {
+  return "rasti-component-" + uid;
+};
+Component.EXPRESSION_PLACEHOLDER_TEMPLATE = function (idx) {
+  return "__RASTI_EXPRESSION{" + idx + "}";
+};
+Component.TRUE_PLACEHOLDER = '__RASTI_TRUE';
+Component.FALSE_PLACEHOLDER = '__RASTI_FALSE';

package/es/Model.js

@@ -1,7 +1,7 @@
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-import Emitter from './Emitter';
+import Emitter from './Emitter.js';
 /**
  * - Orchestrates data and business logic.
  * - Emits events when data changes.
@@ -15,6 +15,7 @@ import Emitter from './Emitter';
  * from `this.attributes`, and a setter is created to set the model property in `this.attributes` and emit `change` 
  * and `change:attribute` events.
  * @module
+ * @extends Rasti.Emitter
  * @param {object} attrs Object containing model attributes to extend `this.attributes`. Getters and setters are generated for `this.attributtes`, in order to emit `change` events.
  * @example
  * import { Model } from 'rasti';
@@ -100,7 +101,7 @@ var Model = /*#__PURE__*/function (_Emitter) {
 
   /**
    * Set an attribute into `this.attributes`.
-   * Emit `change` and `change:attribute` if value change.
+   * Emit `change` and `change:attribute` if a value change.
    * Could be called in two forms, `this.set('key', value)` and
    * `this.set({ key : value })`.
    * This method is called internally by generated setters.
@@ -111,19 +112,57 @@ var Model = /*#__PURE__*/function (_Emitter) {
    * @emits change:attribute
    */;
   _proto.set = function set(key, value) {
-    var _ref,
-      _this3 = this;
-    var attrs = typeof key === 'object' ? key : (_ref = {}, _ref[key] = value, _ref);
+    var _this3 = this;
+    var attrs, args;
+    // Handle both `"key", value` and `{key: value}` style arguments.
+    for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      rest[_key - 2] = arguments[_key];
+    }
+    if (typeof key === 'object') {
+      attrs = key;
+      args = [value].concat(rest);
+    } else {
+      var _attrs;
+      attrs = (_attrs = {}, _attrs[key] = value, _attrs);
+      args = rest;
+    }
+    // Are we in a nested `set` call?
+    // Calling a `set` inside a `change:attribute` or `change` event listener
+    var changing = this._changing;
+    this._changing = true;
+    // Store changed attributes.
+    var changed = {};
+    // Store previous attributes.
+    if (!changing) {
+      this.previous = Object.assign({}, this.attributes);
+    }
+    // Set attributes.
     Object.keys(attrs).forEach(function (key) {
-      var changed = key in _this3.attributes && attrs[key] !== _this3.attributes[key];
-      _this3.previous[key] = _this3.attributes[key];
-      _this3.attributes[key] = attrs[key];
-      // Emit change events.
-      if (changed) {
-        _this3.emit('change', _this3, key, attrs[key]);
-        _this3.emit("change:" + key, _this3, attrs[key]);
+      // Use equality to determine if value changed.
+      if (attrs[key] !== _this3.attributes[key]) {
+        changed[key] = attrs[key];
+        _this3.attributes[key] = attrs[key];
       }
     });
+    var changedKeys = Object.keys(changed);
+    // Pending `change` event arguments.
+    if (changedKeys.length) this._pending = ['change', this, changed].concat(args);
+    // Emit `change:attribute` events.
+    changedKeys.forEach(function (key) {
+      _this3.emit.apply(_this3, ["change:" + key, _this3, attrs[key]].concat(args));
+    });
+    // Don't emit `change` event until the end of the nested 
+    // `set` calls inside `change:attribute` event listeners.
+    if (changing) return this;
+    // Emit `change` events, that might be nested.
+    while (this._pending) {
+      var pendingChange = this._pending;
+      this._pending = null;
+      this.emit.apply(this, pendingChange);
+    }
+    // Reset flags.
+    this._pending = null;
+    this._changing = false;
     return this;
   }