将 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 使用 Knockout。有没有办法在淘汰赛中从“foreach”中获取元素，并将其发送到部分视图？

Answer 1

knockoutjs 要记住的是它的执行位置，即客户端浏览器。 ASP.NET MVC 部分视图正在服务器上呈现，然后被传递到浏览器。

为了让淘汰赛正常工作，您将数据和视图模板作为单独的部分交付给浏览器，然后让客户端进行渲染。

编辑
这就是我开始接近它的方式。您基本上是将部分视图实现为 html 模板和 javascript viewmodel

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>