Unsed file types

by Riderman Sousa

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<h2>Files</h2>
<ul data-bind="foreach: files">
    <li>
        <span data-bind="text: name"></span>
        <select data-bind="options: $root.types, value: type, optionsCaption: ''"></select>
        <!-- ko if: type() -->
            <span data-bind="text: type()"></span>
        <!-- /ko -->
    </li>
</ul>

<h2>Types unused!</h2>
<ul data-bind="foreach: typesUnused">
    <li data-bind="text: $data"> </li>
</ul>

CoffeeScript

class File
  constructor: (data) ->
    @name = data.name
    @id = data.id
    @type = ko.observable(null)
    
    # Updates array of types not used
    @type.subscribe ((oldValue) ->
      console.log "OLD: #{oldValue}"
      viewModel.typesUnused.remove (item) -> item is oldValue if oldValue
    ), @, "beforeChange"
    @type.subscribe (newValue) ->        
      console.log "NEW: #{newValue}"
      if newValue && viewModel.typesUnused.indexOf(newValue) < 0 
        viewModel.typesUnused.push newValue

dataTypes = ["jpeg", "gif", "png", "img"]
    
viewModel =
  files: ko.observableArray([
        new File({name: "A1", id: 1})
        new File({name: "B1", id: 2})
        new File({name: "C1", id: 3})
        new File({name: "D1", id: 4})
    ])
  types:  ko.observableArray(dataTypes)
  typesUnused: ko.observableArray(dataTypes)
  
console.log "BEFORE"
console.dir viewModel.files()
ko.applyBindings viewModel
console.log "AFTER"
console.dir viewModel.files()