SignalR和Knockout viewmodel绑定

Question

我试图使用signalr和knockout.js显示数据库中的产品列表。但没有任何结果。任何人都可以告诉我我做错了什么或者我犯了什么错误？我将非常感谢帮助我。 这是视图：

<div class="products"> 
    <div class="row" data-bind="template: { name: 'productTemplate', foreach: products }"> 
    </div> 
    <span class="messageClass" style="color: red;"></span> 
</div> 

<script type="text/html" id="productTemplate"> 
    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"> 
      <div class="caption"> 
       <h3 data-bind="text: name"></h3> 
      </div> 
     </div> 
    </div> 
</script> 

这是脚本：

<script> 
     $(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(); 
      }); 
     }); 
    </script> 

这里是轮毂的方法来获取所有产品：如果我把我的枢纽代码像

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()); 
    } 
} 

这将工作得很好（取自演示程序）：

VoteViewModel vm = new VoteViewModel(); 
vm.Products = new List<Product>() { new Product() { Name = "Sample", Id = 1 } }; 
Clients.All.getAllProducts(vm.Products.ToArray()); 

看起来像这样的代码虽然不起作用。 （我不知道为什么，也许是因为从DB我的产品对象，有更多的变量？）：

VoteViewModel viewModel = new VoteViewModel(); 
viewModel.Products = ProductService.GetProducts(new GetProductsRequest()).Products.ToList(); 
Clients.All.getAllProducts(viewModel.Products.ToArray()); 

这里是我的产品类代码：（的DbContext类）

[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<Vote> Votes { get; set; } 

我做新ProductViewModel类看起来是这样的：

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; } 
} 

然后从数据库到模型绑定的所有数据，然后返回列表和现在的工作！但我真的不明白，为什么我不能只取产品列表从数据库中取出并发送给信号客户端（就像我之前试图做的那样）。

List<ProductViewModel> prods = new List<ProductViewModel>(); 
    List<Product> 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()); 

Answer 1

您的代码绝对正常工作。请检查您是否参考以下文件。

<script src="~/scripts/jquery.signalr-2.0.2.js" type="text/javascript"></script> 
<script src="~/signalr/hubs"></script> 

Signalr.hubs是给出javascripts代理文件的主要参考。如果您遇到任何错误，请告诉我。

接下来是模型对象创建中引用的属性名称。

  this.hub.client.getAllProducts = function (allProducts) { 
       var mappedProducts = $.map(allProducts, function (item) { 
        return new productViewModel(item.productId, item.name) 
       }); 

       products(mappedProducts); 
      } 

我已将属性名更新为pascal case并为我工作。

return new productViewModel(item.ProductId, item.Name)