asp.net-mvc - SignalR 和 Knockout View 模型绑定(bind)

Question

我正在尝试使用 signalr 和 knockout.js 显示数据库中的产品列表。但没有任何结果。谁能告诉我我做错了什么或哪里出错了？我将非常感谢帮助我。这是 View :

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

这是获取所有产品的 hub 方法:

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 的 Product 对象有更多变量？):

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

这是来 self 的产品类的代码:(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; }
}

然后将数据库中的所有数据绑定(bind)到该模型，然后返回列表，它现在可以工作了!，但我真的不明白为什么我不能只从数据库中获取产品列表并将其发送到信号器客户端(就像我以前尝试过的那样)。

    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 大小写并为我工作。

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