Knockout

by LyndseyB

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p>First String: <input data-bind="value: firstString" /></p>
<p>Second String: <input data-bind="value: secondString" /></p>

<p>First String: <strong data-bind="text: firstString">Hi</strong></p>
<p>Second String: <strong data-bind="text: secondString">There</strong></p>

<p>Derived String: <strong data-bind="text: thirdString"></strong></p>


 <table>
    <thead>
        <tr><th>Item</th></tr>
    </thead>
    <tbody data-bind="foreach: array">
        <tr>
            <td data-bind="text: $data"></td>
        </tr>
    </tbody>
</table>

JavaScript

function AppViewModel() {
  var firstString = ko.observable('first');
  var secondString = ko.observable('second');
  var thirdString = ko.computed(function() {  	
    	return firstString() + ' ' + secondString();
  }, AppViewModel);
  
  var array = ko.observableArray(['lyndsey', 'browning']);
  array.push('hello');
  
	return {
  	firstString: firstString,
    secondString: secondString,
    thirdString: thirdString,
    array: array
  };
}

ko.applyBindings(AppViewModel());