JSFiddle - React, Tailwind, and code Playground

by twtw

HTML

<h1 data-bind="text:title"></h1>
<ul data-bind="foreach:shuffled">
    <span data-bind="text:$data"></span>
</ul>
<span data-bind="text:buttonValue,click:kick" class="btn"></span>

CSS

.btn {
  background-color: hsl(0, 69%, 22%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b42121", endColorstr="#5e1111");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#b42121), to(#5e1111));
  background-image: -moz-linear-gradient(top, #b42121, #5e1111);
  background-image: -ms-linear-gradient(top, #b42121, #5e1111);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b42121), color-stop(100%, #5e1111));
  background-image: -webkit-linear-gradient(top, #b42121, #5e1111);
  background-image: -o-linear-gradient(top, #b42121, #5e1111);
  background-image: linear-gradient(#b42121, #5e1111);
  border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
  -webkit-font-smoothing: antialiased;
}

JavaScript

// 記憶遊戲: shuffle
var array = [1,2,3,4,5];
//var ran = array.sort(function() {return 0.5 – Math.random()})
// [1,2,3].concat([1,2,3]).sort(function() {return 0.5 - Math.random()})
var ranarr = array.concat(array).sort(function() {return 0.5 - Math.random()});
function viewModel() {
    var self = this;
    self.title = 'good';
    self.buttonValue = ko.observable('fine');
    //self.shuffled = ko.observableArray(array);
    self.shuffled = ko.observableArray(ranarr);
    self.kick = function() {
      self.buttonValue(new Date());
    }
}

ko.applyBindings(new viewModel());