view model loader

asynchronously loading a viewmodel with getViewModel method that returns a promise.

by John Allan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/q.js/0.9.2/q.js"></script>
<p>
  press these:
</p>
<p>
  <button id="displayArticle1">
  Display Article 1
  </button>

  <button id="displayArticle2">
  Display Article 2
  </button>
</p>

<p>
  then populate the viewmodel:
</p>
<p>
  <button id="populateViewModel">
  Populate View Model
  </button>
</p>

JavaScript

// Viewmodel Manager
var viewModel = {};
var gotViewModel = Q.defer();

var setViewModel = function setViewModel(v) {
  viewModel = v;
  gotViewModel.resolve(viewModel);
};

var getViewModel = function getViewModel() {
	return gotViewModel.promise
};

var getArticle = function getArticle(index) {
	var d = Q.defer();
  
  getViewModel().then(function showArticle(vm) {
  	d.resolve(vm.article[index])
  });
  
  return d.promise;
};

var populateViewModel = function populateViewModel() {
	//do some ajax and then ->
  setViewModel({
    article: [
      {
        name: 'to be or not to be',
        pages: 1200
      },
      {
        name: 'is the sky the limit?',
        pages: 47
      }
    ]
  });
};

document.querySelector('#populateViewModel').addEventListener('click', populateViewModel);

//External Script

var displayArticle = function displayArticle(index) {
	getArticle(index).then(function (article) {
  	alert(article.name)
  });
};

document.querySelector('#displayArticle1').addEventListener('click', function () {
	displayArticle(0);
});

document.querySelector('#displayArticle2').addEventListener('click', function () {
	displayArticle(1);
});