Emberjs

前言 接續上次的文章，我們這次要把要一步一步把功能給實做完成～！ 第一階段 第二階段 內文 延續上次的文章，我們已經完成 Todo 應用的 CUD（新增、修改、刪除），接下來我們要做的便是可以讓使用者 filter 已經完成的 Todo，哪些又是尚未完成的 Todo。因此這邊我們需要把我們的 Template 分成數個子 Template 並利用框架的 Route 來做到讓這些事情在同一頁完成。 首先我們先把列表頁的內容抽出來變成一個新的 Template 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!-- data-template-name內的值就相當於是一個路由，index是讓這個Template顯示的路由值，裡面的資料來源從哪裡來則從route去設定 --> <script type="text/x-handlebars" data-template-name="MyTodos/index"> <ul id="todo-list"> {{#each itemController="MyTodoList"}} <li {{bind-attr class="isCompleted:completed isEditing:editing" }}> {{#if isEditing}} {{input class="edit" value=title focus-out="acceptChanges" insert-newline="acceptChanges"}} {{else}} {{input type="checkbox" checked=isItemCompleted class="toggle"}} <label {{action "editTodo" on="doubleClick" }}>{{title}}</label><button {{action "removeTodo" }} class="destroy"></button> {{/if}} </li> {{/each}} </ul> </script> 而原本的 Template 就變成如下： ...

前言 接續上個月(拖好久…)的進度我們繼續把這個簡單的應用給完成吧～ 第一階段 第一階段我們只是把最簡單的 Model 型態完成，但是卻還沒賦予 Model 跟 View 互動的機制，這階段就是要完成可以對 TodoList 的項目進行編輯以及把項目標示為已完成。 內文 首先我們先完成選取在每個項目前面的勾勾就把該項目給畫上一個橫線表示完成的功能。在這個功能中我們會需要對列表的每個項目進行操作，我們的 HTML 一開始是長這樣的： 1 2 3 4 5 6 {{#each}} <li {{bind-attr class="isCompleted:completed"}}> <input type="checkbox" class="toggle"> <label>{{title}}</label><button class="destroy"></button> </li> {{/each}} 在這裡我們可以新增一個 controller 來 wrapping 每個 each 裡的項目( Ember 裡的 controller 管理狀態與跟畫面的互動, manage state and decorate data)，新的 controller 內容如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 Todos.MyTodoListController = Ember.ObjectController.extend({ // 類似 Knockout.js 的 Computed property，這個屬性會依照相依的屬性值的變化而改變 // 是否完成 isItemCompleted: function (key, value) { var model = this.get('model'); if (value === undefined) { // Getter, 把目前項目的 isCompleted 回傳 return model.get('isCompleted'); } else { // Setter model.set('isCompleted', value); model.save(); // 更改項目的 isCompleted 值 return value; } }.property('model.isCompleted') // 或也可以寫成如下方式： // 這個寫法看起來比較明確點 isItemCompleted: Ember.computed('model.isCompleted', function (key, value) { var model = this.get('model'); if (value === undefined) { // Getter, 把目前項目的isCompleted回傳 return model.get('isCompleted'); } else { model.set('isCompleted', value); model.save(); // 更改項目的isCompleted值 return value; } }) }) 這個isItemCompleted屬性後面呼叫了property方法，這相當於宣告這個屬性是一個computed property。 然後在前端的html我們改成這樣： ...

前言 時間回到三年前(2011年)…那個時候做 Web Application 在前端 Framework 的選擇不像現在多的眼花繚亂，基本上套上 jQuery 與 jQuery UI 還有一票 jQuery 的徒子徒孫就是火力強大的工具了，那個時候也是我第一次使用完整的前端 framework solution。時間沒走多久前端的需求爆炸性的成長，只用 jQeury 來操作 DOM 元素已經不敷需求，另外用 jQuery 來做 SPA 要手工的地方太多也挺吃力的，所以很多 SPA 的框架就誕生了。目前最多人擁護的莫過於 AngularJS，而後起之秀 EmberJS 雖然也是有不少擁護者但就台灣的環境來說 AngularJS 已獲得壓倒性的勝利，一方面是因為 AngularJS 發展穩定，又有 Google 這個大公司當靠山，所以網路上的資源比任何 SPA Framework 都還要多。但我就是比較搞怪一點所以就選 EmberJS 來看看了 XD。目前 EmberJS 是 Open Source 的專案 host 在 GitHub 上 EmberJS EmberJS 相對於 AngularJS 變化比較大所以需要多關注 GitHub 上面的 Issues 或是 commits，有些時候官網上面的教學文件還落後最新的 Stable 版本一段差距。 本文 這篇文章會以官方的 Todo 教學為實現的功能，功能會到讓這個 Todo 應用可以塞入新的 Todo 事項，當中會加上一些我對它的理解。這個 EmberJS Application 會用到幾個 libary，jQuery + Handlebars + Ember + Ember-Data 這其中 handlebars 至個 libary 還滿特別的，有用過 AngularJS 的人一定對他的功能不陌生，它其實就是一個讓我們可以方便建構語意式模版的工具，用法像是以下這樣： ...