SignalR and knockout view binding

I am trying to display a list of products from a database using signalr and knockout.js. But without any result. Can someone tell me what I'm doing wrong or where is my error? I will be very grateful for the help. This is the 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>

This is the 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>

Here is the hub method for getting all products:

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

If I put on my hub code like this, it will work well (taken from a demo application):

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

My code that looks like this is not working. (I don’t know why, maybe because my Product object from db has more variables?):

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

Here is the code from my Product class: (dbcontext class)

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

I created a new ProductViewModel class that looks like this:

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

db , List IT WORKS NOW!, , signalr (, ).

    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());
+3
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)
+3

All Articles