最近接手的任務(wù)用的是KnockoutJS + TypeScript，所以第二個(gè)項(xiàng)目就采用KnockoutJS做一個(gè)老生常談的TODO List惧眠。

https://codepen.io/xinxhe/pen/qBBMoVL

todo-codepen.gif

KnockoutJS的特點(diǎn)是雙向綁定，在ViewModel中定義一系列的變量，然后用data-bind綁定到對(duì)應(yīng)的HTML元件中即可。做這個(gè)項(xiàng)目的時(shí)候有幾個(gè)難點(diǎn)：1.實(shí)現(xiàn)輸入to-do后按回車(chē)鍵添加满败； 2. 實(shí)現(xiàn)動(dòng)態(tài)組件變化，如點(diǎn)擊編輯按鈕后變成儲(chǔ)存按鈕叹括，點(diǎn)擊編輯按鈕后to-do文字部分變成編輯框算墨； 3. 修改樣式讓to-do變得好看（沒(méi)錯(cuò)，這個(gè)花費(fèi)時(shí)間最長(zhǎng)Ｖ住）?

下面上代碼：

HTML

<div class="todo-container">
  <div class="todo-sub-container todo-title">
    <h2>To-do list by KnockoutJS</h2>
  </div>
  <div class="todo-sub-container todo-input">
    <input data-bind="value: itemToAdd, valueUpdate: 'afterkeydown', event: { keyup : addItem }"
           placeholder="Add a to-do" />
  </div>
  <div class="todo-sub-container todo-list">
    <ul data-bind="foreach: items" class="todo-items">
      <li class="todo-item">
        <div class="todo-item-text">
          <span data-bind="visible: !$data.isEditMode(), text: $data.name"></span>
          <input data-bind="visible: $data.isEditMode, value: $data.name, hasFocus: isEditMode" />
        </div>
        <div class="todo-item-control">
          <button data-bind="click: $parent.removeItem" 
                  class="icon fas fa-trash-alt"></button>
          <button data-bind="visible: !$data.isEditMode(), click: $parent.editItem" 
                  class="icon fas fa-pen"></button>
          <button data-bind="visible: $data.isEditMode, click: $parent.saveItem" 
                  class="icon fas fa-save"></button>
        </div>
      </li>
    </ul>
  </div>
</div>

CSS

* {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.todo-container {
  margin: auto;
  width: 60%;
,  height: 100
}

.todo-sub-container {
  margin: auto;
  min-width: 500px;
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.todo-title {
  background: #ff7f35;
  color: #fff;
  font-size: 25px;
  border-radius: 0 0 5px 5px;
}

.todo-input {
  height: 15vh;
}

.todo-input > input {
  width: 100%;
  margin: 0 20px;
  height: 50px;
  border: 4px solid #ff8c3e;
  border-radius: 5px;
  padding: 5px;
  font-size: 18px;
}

.todo-input > input:focus{
    outline: none;
}

.todo-list {
  height: 65vh;
  background: #fbffde;
  align-items: flex-start;
  border-radius: 5px 5px 0 0;
}

.todo-items {
  list-style: none;  
  width: 100%;
  margin: 0 20px;
}

.todo-item {
  background: #ffe999;
  margin-top: 10px;
  padding: 10px 10px 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
  border-radius: 5px;
  border: 2px solid #ffc25c;
}

.todo-item-text {
  font-size: 18px;
  color: #9a1717;
  width: 80%;
  word-wrap: break-word;
}

.todo-item-text > input {
  padding: 5px;
  font-size: 18px;
  background: #fbffde;
  border: none;
  width: 100%;
}

.todo-item-text > input:focus {
  outline: none;
}

.todo-item-control > button {
  background: #fff6ca;
  margin-left: 5px;
  border: 2px solid #ff7f35;
  border-radius: 20px;
  width: 25px;
  height: 25px;
}

.todo-item-control > button:hover, .icon {
  background: #fff;
  border-color: #fff;
  cursor: pointer;
  color: #9a1717;
}

.icon {
  color: #ff7f35;
}

JS

function ToDoItem(name) {
  var self = this;
  self.name = ko.observable(name);
  self.isEditMode = ko.observable(false);
}

var ViewModel = function() {
  var self = this;
  let todoItems = [ new ToDoItem("Exercise one hour"), new ToDoItem("Supermarket")];
  
  self.items = ko.observableArray(todoItems);
  self.itemToAdd = ko.observable("");
  
  self.addItem = function(data, event) {
    if (event.keyCode === 13 && self.itemToAdd() != "") {    
      self.items.push(new ToDoItem(self.itemToAdd()));
      self.itemToAdd("");
    }
  };
  
  self.removeItem = function() {
    self.items.remove(this);
  };
  
  self.editItem = function() {
    this.isEditMode(true);
  };
  
  self.saveItem = function() {
    this.isEditMode(false);
  };
};
 
ko.applyBindings(new ViewModel()); 

這個(gè)項(xiàng)目花費(fèi)三個(gè)晚上净嘀，本來(lái)想要用TypeScript，但是因?yàn)镵nockoutJS的文檔是用JS寫(xiě)的侠讯，所以為了參考起來(lái)方便就直接用了JS面粮。之后可以試著將其改成TypeScript。