[JS][Knockout] 測試 observableArray

本來只是單純想寫一段代碼，記錄在使用 knockout 時遇到的問題，結果打一打就寫成一個小功能了。ko.observableArray 這功能搭配本身的 for-each ，可以很 快速的達到動態物件產生，如第二段代碼的 15 行，但也造成了一個盲點，如果物件數量過多整體效能就會變得很差，所以，這時應該先暫存在純 Array 上，等最後 產生完畢之後再指定給 observableArray 對像，這樣效能會好一些，此外，順便測試了一下，ko.toJSON()，果然引數值是可以使用自定義的...，應該是為了方便直接 輸出吧...

var ko;
var $;

// Module
module My.Helper {
 export class Data {
  myDate: string;
  myTodo: string;

  constructor(txtDate: string, txtTodo: string) {
   this.myDate = txtDate;
   this.myTodo = txtTodo;
  }
 }
 // Class
 export class Test {
  public txtDate: (input?:string)=>string ;
  public txtTodo: (input?: string) => string;

  public data: Data[];
  constructor() {
   this.data = ko.observableArray([]);
   
   this.txtDate = ko.observable("2013-05-24");
   this.txtTodo = ko.observable("");
  }

  AddTodo(): void {
   this.data.push(new Data(this.txtDate(), this.txtTodo()));
   //using ko
   //console.log( ko.toJSON(this.data) );
   //console.log( ko.toJSON({ a: 123, b: "test" }) );
   //console.log(ko.toJSON(this["data"]()[0] ));
  }
 }

}

不得不說，TypeScript 真的很方便… 可能因為編輯器的支援度也夠高吧… 用起來順手的很

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<script type="text/javascript" src="~/Scripts/myLibs/Test0002.js"></script>
<script type="text/javascript">
 var model;

 $(function () {
  model = new My.Helper.Test();
  ko.applyBindings(model);
 })

</script>
 
<ol data-bind="foreach: data">
 <li>
  <b data-bind="text: myDate" style="color:red"></b>
  <b data-bind="text: myTodo"></b>
 </li>
</ol>

<input type="date" data-bind="value: txtDate"/>
<input type="text" data-bind="value: txtTodo" />
<br/>
<button data-bind="click:AddTodo">Add Todo</button>