JSFiddle - React, Tailwind, and code Playground

by fastfasterfastest

HTML

<div>
  <div data-bind="if: !hasValidAddress()">
    Sorry! I don't know where you live (<span data-bind="text: new Date().valueOf()"></span>)
  </div>
  <div data-bind="ifnot: hasValidAddress">
    Echo - Sorry! I don't know where you live (<span data-bind="text: new Date().valueOf()"></span>)
  </div>
<div data-bind="if: hasValidAddress">
    You live at (<span data-bind="text: new Date().valueOf()"></span>):
    <p data-bind="text: address.street().toUpperCase()"></p>
  </div>
  <div data-bind="ifnot: !hasValidAddress()">
    Echo - You live at (<span data-bind="text: new Date().valueOf()"></span>):
    <p data-bind="text: address.street().toUpperCase()"></p>
  </div>
  <div data-bind="with: addressIfValidAddress">
    With - You live at (<span data-bind="text: new Date().valueOf()"></span>):
    <p data-bind="text: $parent.address.street().toUpperCase()"></p>
  </div>
</div>

<button data-bind="click: function() { address({ street: 'My Street', streetNumber: 123 }); }">Set Address (123 My Street)</button>
<button data-bind="click: function() { address({ street: 'Mx Street', streetNumber: 123 }); }">Set Address (123 Mx Street)</button>
<button data-bind="click: function() { address(null); }">Clear Address</button>
<!-- ko if: true -->
<div>if: true</div>
<!-- /ko -->
<!-- ko ifnot: true -->
<div>ifnot: true</div>
<!-- /ko -->
<!-- ko ifnot: false -->
<div>ifnot: false</div>
<!-- /ko -->
<!-- ko ifnot: true -->
<div>ifnot: true</div>
<!-- /ko -->

<!-- ko if: true -->
<div>hasValidAddress: <span data-bind="text: hasValidAddress"></span></div>
<!-- /ko -->
<!-- ko ifnot: false -->
<div><span data-bind="text: hasValidAddress"></span></div>
<!-- /ko -->

CSS

div {
  border: 1px solid gray;
  padding: .5em;
  margin: .5em;
}

div > div
{
  border: 1px solid lightgray;
}
button {
  display: inline-block;
  margin-left: 1em;
}

JavaScript

////////////////////
        result = ko.pureComputed({