knockout.js의 Zundocomi Kiyoshi(DoCoMo 광 대응 버전)

<div>
  <input type="text" data-bind="textInput: zun"/>
  <input type="text" data-bind="textInput: doko"/>
  <input type="text" data-bind="textInput: kiyoshi"/>
</div>
<div>
  interval(ms):<input type="text" data-bind="value: interval"/>
</div>
<div>
  <button data-bind="click: start">start</button>
</div>

<div data-bind="foreach: results">
  <span data-bind="text: $data"></span>
</div>

<div class="completed">
  <span data-bind="text: kiyoshi, visible: isCompleted"></span>
</div>

var ZundokoViewModel = function() {
  this.zun = ko.observable("ズン");
  this.doko = ko.observable("ドコ");
  this.kiyoshi = ko.observable("キヨシ!");
  this.pattern = [this.zun, this.zun, this.zun, this.zun, this.doko];
  this.interval = ko.observable(500);
  this.results = ko.observableArray();

  this.start = function() {
    this.results.removeAll();
    this.next();
  };
  this.next = function() {
    this.results.push(Math.random() < 0.5 ? this.zun : this.doko);
    if (!this.isCompleted()) {
      setTimeout(this.next.bind(this), this.interval());
    }
  };
  this.isCompleted = ko.computed(function() {
    var len = this.results().length;
    if (len < this.pattern.length) return false;
    var tails = this.results().slice(len - this.pattern.length);
    for (i = 0; i < this.pattern.length; i++) {
      if (tails[i] != this.pattern[i]) return false;
    }
    return true;
  }, this);
};

var viewModel = new ZundokoViewModel();

ko.applyBindings(viewModel);

<input type="text" data-bind="textInput: zun"/>

this.results.push(Math.random() < 0.5 ? this.zun : this.doko);