淘汰赛的foreach来管窥

Question

我有它加载产品自举一个观点：

@model Store.WebUI.Models.ProductsListViewModel 

@{ 
    ViewBag.Title = "Products"; 
} 

<script type="text/javascript" src="~/Scripts/Custom/listViewModel.js"> 
</script> 

@foreach (var p in Model.Products) 
{ 
    @Html.Partial("ProductSummary", p) 
} 

<div class="btn-group pull-right"> 
    @Html.PageLinks(Model.PagingInfo, x => Url.Action("List", 
     new {page = x, category = Model.CurrentCategory})) 
</div> 

和部分观点：

@model Store.Domain.Entities.Product 
<script type="text/javascript" src="~/Scripts/Custom/listViewModel.js"> 
</script> 

<div class="well"> 
    <h3> 
     <strong>@Model.Name</strong> 
     <span class="pull-right label label- 
primary">@Model.Price.ToString("C")</span> 
    </h3> 

    @using (Html.BeginForm("AddToCart", "Cart")) 
    { 
     <div class="pull-right"> 
      @Html.HiddenFor(x=> x.ProductId) 
      @Html.Hidden("returnUrl", Request.Url.PathAndQuery) 
      <input type="submit" class="btn btn-success" value="Add to 
cart"/> 
     </div> 
    } 

    <span class="lead">@Model.Description</span> 
</div> 

但是我通过使用的foreach淘汰赛希望。有没有办法在淘汰赛中从“foreach”中获取元素，并将其发送到部分视图？

Answer 1

knockoutjs记住的事情就是它正在执行的地方，客户端浏览器。 ASP.NET MVC Partial View正在服务器上呈现，然后交付给浏览器。

要让淘汰赛按照原样进行，您需要将数据和视图模板作为单独的部件提供给浏览器，然后让客户端进行渲染。

编辑
这就是我将如何开始接近它。你基本上实现局部视图的HTML模板和视图模型

function formatCurrency(value) { 
 
    return "$" + value.toFixed(2); 
 
} 
 

 
var productData = [{ 
 
    id: 1, 
 
    name: "Big Toy 1", 
 
    price: 15.99, 
 
    description: "This is a big toy", 
 
    returnUrl: "<bigtoyUrl>" 
 
    }, 
 
    { 
 
    id: 2, 
 
    name: "Big Toy 2", 
 
    price: 16.99, 
 
    description: "This is also a big toy", 
 
    returnUrl: "<bigtoyUrl>" 
 
    }, { 
 
    id: 3, 
 
    name: "Big Toy 3", 
 
    price: 17.99, 
 
    description: "Wow another big toy", 
 
    returnUrl: "<bigtoyUrl>" 
 
    } 
 
]; 
 

 

 
var Product = function(data) { 
 
    var self = this; 
 

 
    self.productId = ko.observable(data.id || 0); 
 
    self.name = ko.observable(data.name || ""); 
 
    self.description = ko.observable(data.description || ""); 
 
    self.returnUrl = ko.observable(data.returnUrl || ""); 
 
    self.price = ko.observable(data.price || 0); 
 
    self.price.display = ko.pureComputed(function() { 
 
    return "$" + self.price().toFixed(2); 
 
    }); 
 
    self.addToCart = function() { 
 
    
 
    } 
 

 
}; 
 

 
var Cart = function() { 
 

 
}; 
 

 

 
var PageViewModel = function(data) { 
 
    var self = this; 
 
    self.productList = ko.observableArray(data.products.map(function(item) { 
 
    return new Product(item); 
 
    })); 
 
    self.cart = ko.observableArray(); 
 
    self.addToCart = function(product) { 
 
    self.cart.push(product); 
 
    }; 
 

 

 
} 
 

 

 
ko.applyBindings(new PageViewModel({ 
 
    products: productData 
 
}));

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 

 
<!-- ko foreach: productList --> 
 
<div class="well"> 
 
    <h3> 
 
    <strong data-bind="text: name"></strong> 
 
    <span class="pull-right label label-primary" data-bind="text: price.display"></span> 
 
    </h3> 
 
    <div class="pull-right"> 
 
    <input type="submit" class="btn btn-success" value="Add to cart" data-bind="click: $parent.addToCart" /> 
 
    </div> 
 
    <span class="lead" data-bind="text: description"></span> 
 
</div> 
 
<!-- /ko --> 
 

 
<h3>Cart</h3> 
 
<ul data-bind="foreach: cart"> 
 
    <li data-bind="text: name"></li> 
 
</ul>