JSFiddle - React, Tailwind, and code Playground

by brianlmerritt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<form method="POST" action="https://example.com" accept-charset="UTF-8">
  <input name="_method" type="hidden" value="DELETE">
  <input name="_token" type="hidden" value="irrelevant">
  <div class="row">
    <div class="col-xs-12 margin-top-md-1">
      <button class="btn btn-sm btn-danger" data-bind="click: bladeViewModel.displayModal">
        <i class="fa fa-archive fa-fw"></i> Show Modal
      </button>
    </div>
  </div>
</form>
<div class="warning-modal" data-bind="if : bladeViewModel.showModal()">
  <div class="panel panel-warning">
    <div class="panel-heading">
      <h1 class="panel-title">
                <i class="fa fa-fw fa-exclamation-triangle"></i>Modal Panel
            </h1>
    </div>
    <div class="panel-body">
      <div class="warning-modal-message">
        <p>Warning Message - Are you Sure?</p>
      </div>
      <div class="warning-modal-btns">
        <button class="btn btn-default" data-bind="click: bladeViewModel.hideModal">
          Cancel
        </button>
        <button class="btn btn-danger">
          Submit <i class="fa fa-hand-o-right fa-fw"></i>
        </button>
      </div>
    </div>
  </div>
</div>
</form>

JavaScript

/**
 * bladeViewModel - unique (per page) Knockout View Model
 *
 */

var bladeViewModel = {
  showModal: ko.observable(false),
  displayModal: function() {
    console.info(bladeViewModel.showModal());
    console.info(this.showModal());
    bladeViewModel.showModal(true);
    console.info(bladeViewModel.showModal());
    console.info(this.showModal());
  },
  hideModal: function() {
    bladeViewModel.showModal(false);
    console.info(self.bladeViewModel.showModal())
  }
};
console.info(bladeViewModel.showModal());
ko.applyBindings(bladeViewModel, document.body);