title: SignalR and Knockout viewmodel binding
body: <p>I'am trying to display product list from database using signalr and knockout.js. But without any result. Could anyone tell me what I'am doing wrong or where I have mistake? I will be very grateful for helping me.
  This is the view:</p>
  
  <pre><code>&lt;div class="products"&gt;
      &lt;div class="row" data-bind="template: { name: 'productTemplate', foreach: products }"&gt;
      &lt;/div&gt;
      &lt;span class="messageClass" style="color: red;"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;script type="text/html" id="productTemplate"&gt;
      &lt;div class="col-sm-6 col-md-4"&gt;
          &lt;div class="thumbnail"&gt;
              &lt;div class="caption"&gt;
                  &lt;h3 data-bind="text: name"&gt;&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the script:</p>
  
  <pre><code>&lt;script&gt;
          $(function () {
              function productViewModel(id, name) {
                  this.productId = id;
                  this.name = ko.observable(name);
                  var self = this;
              }
  
              function productListViewModel() {
                  this.hub = $.connection.voteHub;
                  this.products = ko.observableArray([]);
  
                  var products = this.products;
  
                  this.init = function () {
                      this.hub.server.getAllProducts();
                  }
  
                  this.hub.client.getAllProducts = function (allProducts) {
                      var mappedProducts = $.map(allProducts, function (item) {
                          return new productViewModel(item.productId, item.name)
                      });
  
                      products(mappedProducts);
                  }
              }
  
              var vm = new productListViewModel();
              ko.applyBindings(vm);
  
              $.connection.hub.start(function () {
                  vm.init();
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>Here is the hub method to get all products:</p>
  
  <pre><code>public void GetAllProducts()
  {
      VoteViewModel viewModel = new VoteViewModel();
      viewModel.Products = ProductService.GetProducts(new GetProductsRequest()).Products.ToList();
  
      if (viewModel.Products != null)
      {
          // TODO: pomyslec nad wysylaniem listy a nie tablicy!
          Clients.All.getAllProducts(viewModel.Products.ToArray());
      }
  }
  </code></pre>
  
  <p>If I put on my hub code like this, it will work well (taken from demo app):</p>
  
  <pre><code>VoteViewModel vm = new VoteViewModel();
  vm.Products = new List&lt;Product&gt;() { new Product() { Name = "Sample", Id = 1 } };
  Clients.All.getAllProducts(vm.Products.ToArray());
  </code></pre>
  
  <p>My code which look like this don't work though. (i don't know why, maybe because my Product object from db, has more variables?):</p>
  
  <pre><code>VoteViewModel viewModel = new VoteViewModel();
  viewModel.Products = ProductService.GetProducts(new GetProductsRequest()).Products.ToList();
  Clients.All.getAllProducts(viewModel.Products.ToArray());
  </code></pre>
  
  <p>Here is code from my Product class: (dbcontext class)</p>
  
  <pre><code>[Key]
  public int Id { get; set; }
  
  [Required]
  public string Name { get; set; }
  
  public string Description { get; set; }
  
  [Required]
  public string ImagePath { get; set; } 
  
  public virtual ICollection&lt;Vote&gt; Votes { get; set; }
  </code></pre>
  
  <p>I made new ProductViewModel class which looks like this:</p>
  
  <pre><code>public class ProductViewModel 
  {
      public int Id { get; set; }
      public string Name { get; set; }
      public string Description { get; set; }
      public string ImagePath { get; set; }
      public int VotesAmount { get; set; }
  }
  </code></pre>
  
  <p>And then bind all data from db to that model, and then return List and IT WORKS NOW!, but I really don't understand why I can't just take list of products from database and send it to signalr client side (like I tried to do it before).</p>
  
  <pre><code>    List&lt;ProductViewModel&gt; prods = new List&lt;ProductViewModel&gt;();
      List&lt;Product&gt; products = ProductService.GetProducts(new GetProductsRequest()).Products.ToList();
      foreach (var item in products)
      {
          ProductViewModel prod = new ProductViewModel()
          {
              Id = item.Id,
              Name = item.Name,
              Description = item.Description,
              ImagePath = item.ImagePath,
              VotesAmount = item.Votes.Count()
          };
          prods.Add(prod);
      }
  
      Clients.All.getAllProducts(prods.ToArray());
  </code></pre>