Vue DocReady Example

by Ryan Allison

HTML

<div class="vue">

  <input type="text" v-model="output">
  <br><br>
  <span>{{output}}</span>

</div>

JavaScript

Vue.Utils = {};

(function(funcName, baseObj) {
  //https://github.com/jfriend00/docReady
  //Replacement for $.ready
  "use strict";
  var readyList = [];
  var registeredCallbacks = [];
  var readyFired = false;
  var readyEventHandlersInstalled = false;

  // call this when the document is ready
  // this function protects itself against being called more than once
  function ready() {
    if (!readyFired) {
      // this must be set to true before we start calling callbacks
      readyFired = true;
      for (var i = 0; i < readyList.length; i++) {
        // if a callback here happens to add new ready handlers,
        // the docReady() function will see that it already fired
        // and will schedule the callback to run right after
        // this event loop finishes so all handlers will still execute
        // in order and no new ones will be added to the readyList
        // while we are processing the list
        readyList[i].fn.call(window, readyList[i].ctx);
      }
      // allow any closures held by these functions to free
      readyList = [];
    }
  }

  function readyStateChange() {
    if (document.readyState === "complete") {
      ready();
    }
  }

  // This is the one public interface
  // docReady(fn, context);
  // the context argument is optional - if present, it will be passed
  // as an argument to the callback
  baseObj[funcName] = function(callback, key, context) {
    if (typeof callback !== "function") {
      throw new TypeError("callback for docReady(fn) must be a function");
    }

    if (key) {
      if (registeredCallbacks.indexOf(key) < 0) {
        registeredCallbacks.push(key);
      } else {
        console.log(funcName + " key: " + key + " already registered, skipping.");
        return;
      }
    }
    // if ready has already fired, then just schedule the callback
    // to fire asynchronously, but right away
    if (readyFired) {
      setTimeout(function() {
        callback(context);
      }, 1);
     ...