Knockout and jquery ui slider

https://groups.google.com/d/topic/knockoutjs/vQwSSciJMWY/discussion

by motowilliams

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div>
  <input data-bind="value: address"/>
  <button data-bind="click: search">Search</button>
</div>
<!-- ko if: list().length > 0 -->
<h5 data-bind="text: list().length"></h5>
<!-- /ko -->
<!-- ko foreach: list -->
    <div class="result" data-bind="text: addr"></div>
<!-- /ko -->

CSS

.result{
  border: 1px solid black;
  margin:3px;
  height: 40px;
  width:200px;
  padding:5px;
  background-color: #f0f0f0;
}

JavaScript

$(function() {

  var viewModel = function() {
      var self = this;
  
      self.address = ko.observable("Portland");
      
      self.list = ko.observableArray();
      self.hasData = function(){return self.list().length > 0;};
  
      self.search = function() {
              self.list.push({ addr: "Item01" , index: 1 });
              self.list.push({ addr: "Item02" , index: 2 });
              self.list.push({ addr: "Item03" , index: 3 });      
      };
  };
  
  var vm = new viewModel();
  ko.applyBindings(vm);
});