qop's notes: Backbone.js 的 View

2012-04-02

Backbone.js 的 View

在 Backbone.js, View 經常會和 Model 做關聯, 在這裡先排除 Model, 單純討論 View 的其它功能。

屬性 el: 用來表示對應的頁面元素 (element), 其值為字串類型, 可以是標籤名稱或 id 名稱等 selector。
屬性 tagName: 表示新 View 物件初始的標籤。
el 和 tagName 兩者為二選一設定。
屬性 $el: 為對應 element 的 jQuery (或 Zepto) 物件。
屬性 $(selector): 對應子元素的 jQuery (或 Zepto) 物件。
屬性 events: 定義事件 (及事件來源) 對應事件處理的方法。常用的事件: click, dblclick, contextmenu, mouseover, mouseout。

方法 initialize: 初始化的方法, 定義類別時定義。有別於 constructor, 在此不建議使用 constructor。建立 View 物件時, 傳入一個 Object 物件, 會將 Object 的屬性複製給 View 物件。
方法 render: 物件成形的方法, 定義類別時定義。應回傳物件本身 (this)。
方法 remove: 方便從 DOM 將 View 物件移除。同 $(view.el).remove()。
方法 make: 方便由標籤名稱、屬性 (包成 Object )、內容字串, 建立 element。
方法 delegateEvents: 設定事件 (及事件來源) 對應事件處理方法。通常只要定義屬性 events 即可完成自動設定, 而無需手動呼叫此方法。
方法 undelegateEvents: 取消所有設定事件 (及事件來源) 對應事件處理方法。當要讓 View 物件失能, 或暫時從 DOM 移除時, 可以呼叫此方法。

範例:
t01.html ----------------------------------->>>

<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
 </head>
 <body>
  <div id="buttons" mydata="shinder">
   <button id="b1"> Button 1 </button>
   <button> Button 2 </button>
   <button> Button 3 </button>
  </div>
  <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="js/coffee-script.js"></script>
  <script type="text/javascript" src="js/json2.js"></script>
  <script type="text/javascript" src="js/underscore-1.3.1.js"></script>
  <script type="text/javascript" src="js/backbone.js"></script>

  <script type="text/template" id="my_tpl">
   <input type="text" value="<%=hi%>">
  </script>
  <script type="text/coffeescript" src="t01.coffee"></script>
 </body>
</html>

t01.coffee ----------------------------------->>>

$ = jQuery
$ ->
 class MainView extends Backbone.View
  el: 'body'
  initialize: ->
   buttons = new ButtonsView
   # 取得對應 element 的 jQuery 物件後, 再取得屬性值
   # console.log $(buttons.el).attr('mydata')
   console.log buttons.$el.attr('mydata')
   input = new InputView
   # console.log input.$el.html() # 取得元素裡的 html (子元素字串)
   # console.log input.el # 取得元素物件
   # @$el.append input.$el.html() # 加入子元素
   @$el.append input.el
   # buttons.$el.hide()

 class InputView extends Backbone.View
  # tagName: 'div' # 預設為 div
  initialize: ->
   tpl = _.template $('#my_tpl').html()
   @$el.append tpl hi:'你好'

 class ButtonsView extends Backbone.View
  el: '#buttons'
  events:
   'click': 'onClick'
   'click #b1': 'b1Click'
   'click button:eq(1)': 'b2Click'
   'click button:nth-child(odd)': 'oddClick'
  onClick: (event)->
   # console.log event  # jQuery.Event
   console.log $(event.target).html()
  b1Click: ->
   alert 'b1'
  b2Click: ->
   alert 'b2'
  oddClick: ->
   alert 'odd'

 mainView = new MainView;

沒有留言:

張貼留言

2012-04-02

Backbone.js 的 View

沒有留言:

FB 留言