之前寫(xiě)了1篇技能樹(shù)之旅: 從模塊分離到測(cè)試，現(xiàn)在來(lái)講說(shuō)這其中產(chǎn)生了甚么。

從這開(kāi)始

在我們沒(méi)有點(diǎn)擊任何技能的時(shí)候，顯示的是”從這開(kāi)始”，而當(dāng)我們點(diǎn)下去時(shí)產(chǎn)生了甚么?

明顯變化以下:

• 樣式變了
• URL變成了http://skill.phodal.com/#_a2_1_Name
• 點(diǎn)數(shù) + 1
• 點(diǎn)亮了箭頭

從Knockout開(kāi)始

Knockout是1個(gè)輕量級(jí)的UI類(lèi)庫(kù)，通過(guò)利用MVVM模式使JavaScript前端UI簡(jiǎn)單化。

聽(tīng)說(shuō)有下面的1些特性。

• 聲明式綁定 (Declarative Bindings)：使用簡(jiǎn)明易讀的語(yǔ)法很容易地將模型(model)數(shù)據(jù)關(guān)聯(lián)到DOM元素上。
• UI界面自動(dòng)刷新 (Automatic UI Refresh)：當(dāng)您的模型狀態(tài)(model state)改變時(shí)，您的UI界面將自動(dòng)更新。
• 依賴(lài)跟蹤 (Dependency Tracking)：為轉(zhuǎn)變和聯(lián)合數(shù)據(jù)，在你的模型數(shù)據(jù)之間隱式建立關(guān)系。
• 模板 (Templating)：為您的模型數(shù)據(jù)快速編寫(xiě)復(fù)雜的可嵌套的UI。

在我們的html中的從這開(kāi)始是這樣1段HTML

<h2 class="start-helper" data-bind="css:{active:noPointsSpent}">從這開(kāi)始!</h2> 

這是對(duì)應(yīng)的CSS:

.start-helper-avatar {
  background: url(../images/red-arrow.png) no-repeat left center;
  padding-left: 55px;
  top: 80px;
  position: relative;
  left: 410px;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  -webkit-opacity: 0;
  opacity: 0;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  filter: alpha(opacity=0);
}

.start-helper-avatar.active {
  -moz-opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  filter: alpha(opacity=100);
}

.start-helper-avatar.active與.start-helper-avatar的不同的地方在于.actie將opacity設(shè)置為了1。

而，我們對(duì)應(yīng)的JS代碼是這模樣的:

self.noPointsSpent = ko.computed(function () {
  return !Boolean(ko.utils.arrayFirst(self.skills(), function (skill) {
    return (skill.points() > 0);
  }));
});

當(dāng)有1個(gè)技能點(diǎn)數(shù)大于0時(shí)，返回False。而當(dāng)沒(méi)有技能點(diǎn)數(shù)時(shí)，html是這樣的。

<h2 class="start-helper active" data-bind="css:{active:noPointsSpent}">從這開(kāi)始!</h2>

故而對(duì)此，我們可以明白，Knockout的CSS綁定是這模樣的:

CSS綁定主要是給DOM元素對(duì)象添加或移除1個(gè)或多個(gè)css class類(lèi)名。這非常有用，比如當(dāng)值變成負(fù)數(shù)的時(shí)候用紅色高亮顯示。

點(diǎn)數(shù)計(jì)算

對(duì)應(yīng)的我們可以找到點(diǎn)數(shù)計(jì)算的HTML

<div data-bind="css: { 'can-add-points': canAddPoints, 'has-points': hasPoints, 'has-max-points': hasMaxPoints }, attr: { 'data-skill-id': id }" class="skill">

固然還有:

<div data-bind="click: addPoint, rightClick: removePoint" class="hit-area"></div>

與CSS:

.skill.can-add-points .frame {
  background-position: ⑻0px top;
}
.skill.can-add-points .skill-dependency {
  -moz-opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  filter: alpha(opacity=100);
}

對(duì)應(yīng)的，我們可以找到它的js函數(shù):

  self.addPoint = function () {
    if (self.canAddPoints()) {
      self.points(self.points() + 1);
    }
  };
  self.removePoint = function () {
    if (self.canRemovePoints()) {
      self.points(self.points() - 1);
    }
  };

看上去通俗易懂，唯1需要理解的就是click。

click綁定在DOM元素上添加事件句柄以便元素被點(diǎn)擊的時(shí)候履行定義的JavaScript 函數(shù)。

其他

Sherlock:1個(gè)新的技能樹(shù):https://github.com/phodal/sherlock。

開(kāi)發(fā)進(jìn)行時(shí)，歡迎加入。