Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The DOM is not your Application

Noel Rappin
January 10, 2014

The DOM is not your Application

CodeMash 2014

Noel Rappin

January 10, 2014
Tweet

More Decks by Noel Rappin

Other Decks in Technology

Transcript

  1. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd @initListInForm = -> window.items =

    {} $("#item_list option").each (index, option) -> $option = $(option) unless window.items[$option.data("category")] window.items[$option.data("category")] = [] if $option.data("category") window.items[$option.data("category")].push(option) $("#item_list option").remove() $("#order_category_id").change -> $("#item_list option").remove() category_id = $(this).val() _.each window.items[category_id], (option) -> $("#item_list").append($(option))
  2. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd @initListInForm = -> window.items =

    {} $("#item_list option").each (index, option) -> $option = $(option) unless window.items[$option.data("category")] window.items[$option.data("category")] = [] if $option.data("category") window.items[$option.data("category")].push(option) $("#item_list option").remove() $("#order_category_id").change -> $("#item_list option").remove() category_id = $(this).val() _.each window.items[category_id], (option) -> $("#item_list").append($(option)) Reading initial values
  3. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd @initListInForm = -> window.items =

    {} $("#item_list option").each (index, option) -> $option = $(option) unless window.items[$option.data("category")] window.items[$option.data("category")] = [] if $option.data("category") window.items[$option.data("category")].push(option) $("#item_list option").remove() $("#order_category_id").change -> $("#item_list option").remove() category_id = $(this).val() _.each window.items[category_id], (option) -> $("#item_list").append($(option)) Clearing select
  4. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd @initListInForm = -> window.items =

    {} $("#item_list option").each (index, option) -> $option = $(option) unless window.items[$option.data("category")] window.items[$option.data("category")] = [] if $option.data("category") window.items[$option.data("category")].push(option) $("#item_list option").remove() $("#order_category_id").change -> $("#item_list option").remove() category_id = $(this).val() _.each window.items[category_id], (option) -> $("#item_list").append($(option)) Event handler
  5. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd @initListInForm = -> window.items =

    {} $("#item_list option").each (index, option) -> $option = $(option) unless window.items[$option.data("category")] window.items[$option.data("category")] = [] if $option.data("category") window.items[$option.data("category")].push(option) $("#item_list option").remove() $("#order_category_id").change -> $("#item_list option").remove() category_id = $(this).val() _.each window.items[category_id], (option) -> $("#item_list").append($(option)) Access Query Change
  6. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd describe "item List Form", ->

    describe "with category and item list", -> ! beforeEach -> affix("select#order_category_id") $("#order_category_id").append($("<option>").val("0")) $("#order_category_id").append($("<option>").val("1")) $("#order_category_id").append($("<option>").val("2")) $("#order_category_id").val("0") affix("select#item_list") $("#item_list").append($("<option>").data("category", "1").val(1)) $("#item_list").append($("<option>").data("category", "1").val(2)) $("#item_list").append($("<option>").data("category", "2").val(3)) initListInForm()
  7. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd it "extracts items from the

    initial page load", -> expect(_.pluck(window.items[1], 'value')).toEqual(["1", "2"]) expect(_.pluck(window.items[2], 'value')).toEqual(["3"]) it "removes the original options after extracting", -> expect($("#item_list option").length).toEqual(0) it "adds the proper items on change", -> $("#order_category_id").val("1") $("#order_category_id").change() expect(_.pluck($("#item_list option"), 'value')).toEqual(["1", "2"])
  8. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd class @DualSelect constructor: -> @items

    = {} ! initialize: -> this.extractItems() this.setChangeHandler() this.updateItemList() this Extract to class
  9. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd ! extractItems: -> $("#item_list option").each

    (index, option) => this.additemOptionToList(option) ! addItemOptionToList: (option) -> categoryId = $(option).data("category") @items[categoryId] = [] unless @items[categoryId] @items[categoryId].push(option) if categoryId ! clearItemList: -> $("#item_list option").remove() ! Access Query Change Extract to class
  10. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd setChangeHandler: -> $("#order_category_id").change (event) =>

    this.updateItemList() ! updateItemList: -> this.clearItemList() category_id = $("#order_category_id").val() _.each @items[category_id], (option) => $("#item_list").append($(option)) Access Query Change Extract to class
  11. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd itemList: -> $("#item_list") ! itemListOptions:

    -> $("#item_list option") ! categoryList: -> $("#order_category_id") Access Query Change Create DOM Methods
  12. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd extractItems: -> this.itemListOptions().each (index, option)

    => this.additemOptionToList(option) ! addItemOptionToList: (option) -> categoryId = $(option).data("category") @items[categoryId] = [] unless @items[categoryId] @items[categoryId].push(option) if categoryId ! clearItemList: -> this.itemListOptions().remove() Access Query Change Create DOM Methods
  13. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd setChangeHandler: -> this.categoryList().change (event) =>

    this.updateItemList() ! updateItemList: -> this.clearItemList() category_id = this.categoryList().val() _.each @items[category_id], (option) => this.itemList().append($(option)) Access Query Change Create DOM Methods
  14. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd class @DualSelectDom itemList: -> $("#item_list")

    ! itemListOptions: -> $("#item_list option") ! categoryList: -> $("#order_category_id") class @DualSelect constructor: -> @items = {} @dom = new DualSelectDom Access Query Change Extract DOM Class
  15. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd extractItems: -> @dom.itemListOptions().each (index, option)

    => this.additemOptionToList(option) ! addItemOptionToList: (option) -> categoryId = $(option).data("category") @items[categoryId] = [] unless @items[categoryId] @items[categoryId].push(option) if categoryId Access Query Change Extract DOM Class
  16. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd clearItemList: -> @dom.itemListOptions().remove() ! setChangeHandler:

    -> @dom.categoryList().change (event) => this.updateItemList() ! updateItemList: -> this.clearItemList() category_id = @dom.categoryList().val() _.each @items[category_id], (option) => @dom.itemList().append($(option)) Access Query Change Extract DOM Class
  17. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd class @DualSelectDom itemList: -> $("#item_list")

    itemListOptions: -> $("#item_list option") ! itemListData: -> this.itemListOptions().map (index, option) -> {category: $(option).data("category"), value: $(option).val()} ! Access Query Change Move Queries
  18. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd ! categoryList: -> $("#order_category_id") !

    categoryValue: -> this.categoryList().val() ! clearItemList: -> this.itemListOptions().remove() ! appendToItemList: (value) -> this.itemList().append($("<option>").val(value)) Access Query Change Move Queries
  19. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd extractItems: -> @dom.itemListData().each (index, data)

    => this.addItemOptionToList(data) ! addItemOptionToList: (data) -> categoryId = data.category @items[categoryId] = [] unless @items[categoryId] @items[categoryId].push(data.value) if categoryId ! Access Query Change Move Queries
  20. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd setChangeHandler: -> @dom.categoryList().change (event) =>

    this.updateItemList() ! updateItemList: -> @dom.clearItemList() _.each @items[@dom.categoryValue()], (value) => @dom.appendToItemList(value) Access Query Change Move Queries
  21. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd describe "item List Form", ->

    describe "with category and item list", -> beforeEach -> @result = new DualSelect() @result.dom = new TestDom() @result.initialize() ! it "extracts items from the initial page load", -> expect(@result.items[1]).toEqual(["1", "2"]) expect(@result.items[2]).toEqual(["3"]) Stub For Tests
  22. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd ! ! it "removes the

    original options after extracting", -> expect($("#item_list option").length).toEqual(0) ! it "adds the proper items on change", -> @result.dom.categoryList().val("1") @result.dom.categoryList().change() expect(_.pluck(@result.dom.itemList().children(), 'value')).toEqual(["1", "2"]) Stub For Tests
  23. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd class TestDom itemListData: -> [{category:

    1, data: 1}, {category: 1, data: 2}, {category: 2, data: 3}] ! categoryList: -> change: -> value: 1 ! categoryValue: -> this.categoryList().value ! clearItemList: -> ! appendToItemList: (value) -> Stub For Tests