12.3 認識 Backbone.Model

Backbone.Model 是 Backbone 初學者的第三關。Backbone.Model 用來表示（存放）資料，這是一個「資料模型」的類別。接下來以幾個步驟，重新實作第 11 章的「顯示留言」功能。

Step 1：宣告 Model

有了 Backbone.Model 後，才能表示資料。修改 client/javascripts/app.js 加入以下程式碼：

1  app.Message = Backbone.Model.extend({
2    defaults: {
3      success: false,
4      errors: [],
5      errfor: {},
6
7      message: 'No message yet.'
8    }
9  });

說明如下：

第 1 行：使用 Backbone.Model.extend() 宣告（擴充）一個新的 Data Model，命名為 Message 並儲放於 app 物件
第 2 行：使用 defaults 為這個 Model 定義預設的資料：
success：Backbone 框架所定義的欄位，目前暫不使用
errors：Backbone 框架所定義的欄位，目前暫不使用
errfor：Backbone 框架所定義的欄位，目前暫不使用
message：自行定義的欄位，用來儲存訊息

Step 2：宣告 Template

原本的做法，將程式碼與 HTML5 語法混在一起，非常不好維護。現在改用 Underscore 與 Backbone 後，就可以使用 Template 的方式。以下是原本的實作：

var dataMapping = function(data) {
    for (i = 0; i < data.length; i++) {
        var htmlCode = 
            "<div class=\"alert alert-dismissable alert-info\">"
            + "     <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">×</button>"
            + "     <h4>jollen</h4>"
            + data[i].message
            +"</div>";

        $('#message').append(htmlCode);
    }
}

將 HTML5 語法的部份，獨立出來，並且宣告成 Template。修改 chat.html，加入以下片段：

<script type='text/template' id='tmpl-message'>
  <div class="alert alert-dismissable alert-info">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
      ×</button>
    <h4>jollen</h4>
    <%= message %>
  </div>
</script>

使用