iT邦幫忙

DAY 24
2

建立API為中心的輕量級網站系列 第 24

加上 knockout.js 的夢幻筆名

透過 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

系列文章列表


上一篇
以 sinatra + redis 改良實作夢幻筆名
下一篇
knockout.js + redis 實作為程式碼上色的線上工具
系列文
建立API為中心的輕量級網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言