KO - Basic

by patelsan

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0rc2.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container-fluid">
<div class="row-fluid">
   <h3 data-bind="text: projectName"></h3>
   <input type="text" data-bind="value: newStory" />
   <button data-bind="click: addStory" class="btn btn-success">Add Story</button>        
</div>
<div class="row-fluid">
<div data-bind="foreach: backlogStories" class="span4 story-bucket">
    <div class="story">
        <span data-bind="text: title"></span>
        <span class="label label-info"><-</span>
        <span class="label label-info">-></span>
    </div>
</div>
    <div data-bind="foreach: backlogStories" class="span4 story-bucket"></div>    
    <div data-bind="foreach: backlogStories" class="span4 story-bucket"></div>    
    </div>
</div>

CSS

.story {
line-height: 1.1;
margin: 6px 6px 6px 6px;    
padding: 6px 6px 6px 6px;
background-color: #F6D8AA;
border-radius: 5px;
}

.story-bucket{
    background-color: #FFFCF4;
    height:300px;
}

CoffeeScript

StoryBoardVM =
    projectName: "SmartLine"
    newStory: ko.observable("")
    backlogStories: ko.observableArray([{title: "Created project structure."}, {title: "Add souce code to repository"}])
    addStory: -> 
        this.backlogStories.push({title: this.newStory()})
        this.newStory("")
    
ko.applyBindings(StoryBoardVM)