JSFiddle - React, Tailwind, and code Playground

by stevebeauge

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
<script id="mainTemplate" type="text/x-jsrender">
  <p>Actual file name :
    <span data-link="fileName"></span></p>
  <br/>

  <input data-link="fileName convert='getBaseName' convertBack='toFileName'" />
  <span data-link="{getFileExtension:fileName}"></span>
</script>

<div id="container">

</div>

JavaScript

(function($) {
  var getBaseName = function(value) {
    if (!value || (typeof value !== 'string')) return null;
    var lastDot = value.lastIndexOf('.');
    if (lastDot >= 0) {
      return value.substring(0, lastDot);
    }
    return value;
  };
  var getFileExtension = function(value) {
    if (!value || (typeof value !== 'string')) return null;
    var lastDot = value.lastIndexOf('.');
    if (lastDot >= 0) {
      return value.substring(lastDot);
    }
    return null;
  };
  var toFileName = function(value) {
  	console.log(this,arguments);
    return value + this.tagCtx.view.data.extension;
  };

  var dataVm = {
    fileName: "somefile.png",
    extension: getFileExtension("somefile.png")
  };
  $.views.converters({
    getBaseName: getBaseName,
    getFileExtension: getFileExtension,
    toFileName : toFileName  
  });
  
  var helpers = {
  	
 };

  $.templates("#mainTemplate").link("#container", dataVm, helpers);
})(jQuery);