透過 knockout.js 來操作顯示夢幻筆名
會把抓來的筆名，都存在 novelname 這個key裡，
在頁面顯示已存幾個筆名，
若覺得太少，可有抓取新筆名的按鍵。
另外也可顯示本地筆名的按鍵：

  get '/rand/index' do
    @numNovels = (redis.scard 'novelname')
    erb :rand_index
  end

而整個 view 的內容很簡單：

目前本地有 <span data-bind="text:numNovels"></span> 個筆名。
<button data-bind="click:fetchNovel">抓新筆名到本地</button><br />
<!-- ko foreach:newNovels -->
  <span data-bind="text:$data"></span>
<!-- /ko -->
<hr />
<input data-bind="value:howMany" /> <button data-bind="click:fetchLocal">抓本地的筆名顯示</button>
<hr />
<!-- ko foreach:localNovels -->
  <span data-bind="text:$data"></span>
<!-- /ko -->

而javascript的部份是：

<script src="/js/knockout.js" type="text/javascript"></script>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  var viewModel = function() {
    var self = this;
    self.numNovels = ko.observable(<%= @numNovels %>);;
    self.newNovels = ko.observableArray();
    self.localNovels = ko.observableArray();
    self.howMany = ko.observable(20);
    self.fetchNovel = function() {
      $.getJSON("/rand/fetchNovel",{}, function(data){
        self.numNovels(data['nnames']);
        self.newNovels(data['novels']);
      });
    };

    self.fetchLocal = function() {
      var nums = self.howMany();
      $.getJSON("/rand/fetchLocal"+nums,{},function(data){
        self.localNovels(data);
      });
    };
  };

  ko.applyBindings(new viewModel());
</script>

其中怎麼回應吐出 json 的 /rand/fetchNovel 是去原站抓筆名來，
存入 redis 後，算出共存了幾個筆名，並秀出所抓到的筆名來。

  get '/rand/fetchNovel' do
    novels = more_novel_name
    nnames = (redis.scard 'novelname')
    {:novels => novels, :nnames => nnames}.to_json
  end

什麼是 more_novel_name ？
請參閱 以 sinatra + redis 改良實作夢幻筆名，
而吐出 json 的 /rand/fetchLocal 是讀取redis裡的筆名，

  get "/rand/fetchLocal/?:num?" do
    novels = rand_novelname(params[:num].to_i)
    novels.to_json
  end

其中的 rand_novelname 也請參閱 以 sinatra + redis 改良實作夢幻筆名。

而利用 KO 來綁定按鍵要做什麼動作，
其動作主要是用 jquery 的 getJSON 來執行並獲取資料結果，
並直接更新頁面；
透過此只有一個頁面，
而可以有不同的動作來執行，
只更新頁面必要的資料，
而不用整個網頁重傳。

此次實作在：http://i5.tagbible.net/rand/index

系列文章列表