Footwork Hello World

Hello world basic example using FootworkJS

by Jonathan Newman

HTML

<script src="https://unpkg.com/footwork/dist/footwork.js"></script>

<viewModel module="Person" params="name: 'Jack'">
  My name is <span data-bind="text: name"></span>
  <button data-bind="click: sayHello">Say Hello</button>
  <span data-bind="text: response"></span>
</viewModel>

<viewModel module="Person" params="name: 'Jill'">
  My name is <span data-bind="text: name"></span>
  <button data-bind="click: sayHello">Say Hello</button>
  <span data-bind="text: response"></span>
</viewModel>

<viewModel module="Person" params="name: 'Jerry'">
  My name is <span data-bind="text: name"></span>
  <button data-bind="click: sayHello">Say Hello</button>
  <span data-bind="text: response"></span>
</viewModel>

CSS

viewModel {
  display: block;
  margin: 10px;
}

JavaScript

fw.viewModel.register('Person', function (params) {
  var self = fw.viewModel.boot(this, {
    namespace: 'Person'
  });
  
  self.name = params.name;
  self.response = fw.observable();
  self.sayHello = function () {
  	self.$namespace.publish('hello', self);
  };
  
  self.$namespace.subscribe('hello', function (from) {
  	if (from.name !== self.name) {
	  	self.response('Hello ' + from.name);
		} else {
      self.response(undefined);
    }
  });
});

fw.start();