Menu with KnocjoutJS and SammyJS

by mickeyvip

HTML

<script src="https://raw.github.com/quirkey/sammy/master/lib/min/sammy-latest.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<nav id="menu-container">
  <ul id="menu" data-bind="foreach: menuItems">
    <li><a href="#" data-bind="text: title, attr: { href: '#/' + id}, css: { selected: isSelected }"></a></li>
  </ul>
</nav>

SCSS

.selected {
  font-weight: bold;
}

CoffeeScript

menu = [
  {id: "messages"
  title: "messages"},
  {id: "notifications"
  title: "notifications"},
  {id: "payments"
  title: "payments"}
]
class MenuItem
  constructor: (menuItemJson) ->
    @id = menuItemJson.id
    @title = menuItemJson.title
    @isSelected = ko.observable(false)
    
class MenuViewModel
  constructor: (menuJson) ->
    @menuItems = ko.observableArray(@prepareMenuItems(menuJson))
    @selectedItem = ko.observable()
  prepareMenuItems: (menuJson) ->
    menuItems = []
    for menuItemJson in menuJson
      menuItems.push new MenuItem(menuItemJson)
    menuItems
  selectMenu: (menuItem) =>
    console.log "selecting menu", menuItem
    @selectedItem()?.isSelected(false)
    @selectedItem(menuItem)
    menuItem.isSelected(true)
  selectMenuById: (menuItemId) ->
    console.log "selectMenuById", menuItemId
    menuItem = _.find @menuItems(), (currentMenuItem) ->
      console.log currentMenuItem
      currentMenuItem.id == menuItemId
    console.log "menuItem", menuItem
    @selectMenu menuItem if menuItem? and (@selectedItem() isnt menuItem)

menuViewModel = new MenuViewModel(menu)
ko.applyBindings menuViewModel, document.getElementById "menu-container"

sammyApp = $.sammy(() ->
  console.log "Sammy JS initialized" 
  @get "#/", (context) ->
    console.log "sammyApp at /#"
    menuViewModel.selectMenuById "messages"
    
  @get "#/:menu", (context) ->
    console.log "sammyApp at /#/#{@params["menu"]}"
    menuViewModel.selectMenuById @params["menu"]
)

sammyApp.run('#/');