制作动态产品清单。
我有一个带产品的购物应用程序。当我点击产品的add button
时,我想在侧边栏中显示我添加的产品。
我的ProductsSummary/Index.cshtml
(使用Razor Engine)中包含以下代码:
<ul class="summary">
@if (Session["ProductsSummary"] == null)
{
<li class="is-empty">
<p>Your summary is empty.</p>
</li>
<li data-bind="attr: { 'data-product-id': id }">
<div class="product-summary-actions float-right">
<button class="btn btn-danger btn-mini remove-item">
<i class="icon-remove"></i>
</button>
</div>
<div class="product-summary-quantity">
<h6 data-bind="text: infoComposition"></h6>
</div>
<div class="product-summary-description">
<p data-bind="text: name"></p>
</div>
</li>
}
else
{
foreach
(var product in
(List<MyApp.Models.Data.getSpecificProductToShoppingList_Result>)
Session["ProductsSummary"])
{
<!-- ko foreach: products -->
<li data-product-id="@product.id">
<div class="product-summary-actions float-right">
<button class="btn btn-danger btn-mini remove-item">
<i class="icon-remove"></i>
</button>
</div>
<div class="product-summary-quantity">
<h6>
@product.quantity
@product.measure@(@product.quantity == 1 ? "" : "s")
</h6>
</div>
<div class="product-summary-description">
<p>@product.name</p>
</div>
</li>
<!-- /ko -->
}
}
</ul>
如您所见,代码中有三个<li>
。第一种是显示“摘要为空”的消息。如果会话为空(当然,在添加任何产品的情况下,会话为空);当我在会话为空时添加一些内容时,第二个li
作为Knockout的模型;最后一个是显示会话中的产品。
我在这里感觉有点“DRY”。无论会话是否存在,我如何重用相同的模板?
我的ProductsSummary/Index.cshtml
(使用Razor Engine)中包含以下代码:
<ul class="summary">
@if (Session["ProductsSummary"] == null)
{
<li class="is-empty">
<p>Your summary is empty.</p>
</li>
<li data-bind="attr: { 'data-product-id': id }">
<div class="product-summary-actions float-right">
<button class="btn btn-danger btn-mini">
<i class="icon-remove"></i>
</button>
</div>
<div class="product-summary-quantity">
<h6 data-bind="text: infoComposition"></h6>
</div>
<div class="product-summary-description">
<p data-bind="text: name"></p>
</div>
</li>
}
else
{
foreach
(var product in
(List<MyApp.Models.Data.getSpecificProductToShoppingList_Result>)
Session["ProductsSummary"])
{
<!-- ko foreach: products -->
<li data-product-id="@product.id">
<div class="product-summary-actions float-right">
<button class="btn btn-danger btn-mini remove-item">
<i class="icon-remove"></i>
</button>
</div>
<div class="product-summary-quantity">
<h6>
@product.quantity
@product.measure@(@product.quantity == 1 ? "" : "s")
</h6>
</div>
<div class="product-summary-description">
<p>@product.name</p>
</div>
</li>
<!-- ko -->
}
}
</ul>
如您所见,有if
检查ProductsSummary
会话是否存在。如果是,则应用程序在屏幕上显示我在摘要中添加的产品列表。
会话为空,如您所见,应用程序在li
is-empty
类中显示消息。
重点是:{strong> 需要<li class="is-empty">[...]</li>
之后的“模板”才能显示添加到摘要中的项目?
我的意思是,我知道当我点击“添加产品”按钮时,无论是否有会话,Knockout都需要显示某些内容,但我为同样的目的重复使用相同的模板。
看看这个片段:
<li data-product-id="@product.id">
<div class="product-summary-actions float-right">
<button class="btn btn-danger btn-mini remove-item">
<i class="icon-remove"></i>
</button>
</div>
<div class="product-summary-quantity">
<h6>
@product.quantity
@product.measure@(@product.quantity == 1 ? "" : "s")
</h6>
</div>
<div class="product-summary-description">
<p>@product.name</p>
</div>
</li>
在这种情况下,我在foreach
内使用它,因为我必须显示从数据库中提取的项目。
另一方面,如果没有会话,则存在以下片段:
<li data-bind="attr: { 'data-product-id': id }">
<div class="product-summary-actions float-right">
<button class="btn btn-danger btn-mini">
<i class="icon-remove"></i>
</button>
</div>
<div class="product-summary-quantity">
<h6 data-bind="text: infoComposition"></h6>
</div>
<div class="product-summary-description">
<p data-bind="text: name"></p>
</div>
</li>
正如你所看到的,这两个片段是相似的 - 一个代表来自数据库的数据,另一个代表一个模型,当没有会话时分别使用Knockout - 我需要一种方法来“模板化”这个。
- 有人进入我的网站/应用程序;
- 在我的布局的右侧有一个侧边栏,上面有一条消息:“摘要为空。”;
- “哦,这是一个很好的产品!我会将它添加到我的摘要中!”,然后用户点击
Add
按钮,“摘要为空”。消息消失,用户添加的产品以列表中的项目格式显示(我在[第一个/第二个片段]之前传递的模板)。- “好的,我现在将推出另一类产品。” - *用户点击“电视”类别* - “哦我的上帝!看看这台电视!我现在将添加到我的摘要中!” - *用户点击随机电视的“添加按钮”。* - 列表中已有产品,但另一个(电视)出现。
- “哦,没关系。我没有钱。我会从我的摘要中删除这些项目。” - *用户单击摘要上每个产品的“删除按钮”* - 如果没有产品,摘要将显示:“摘要为空”。就像一个魔法,没有任何刷新或类似的东西。
醇>
(搞笑,嗯?)
$(document).ready(function () {
function Product(id, name, measure, quantity) {
this.id = ko.observable(id);
this.name = ko.observable(name);
this.measure = ko.computed(function () {
return quantity > 1 ? measure + "s" : measure;
}, this);
this.quantity = ko.observable(quantity);
this.infoComposition = ko.computed(function () {
return this.quantity() + " " + this.measure()
}, this);
}
function SummaryViewModel() {
this.products = ko.observableArray([]);
this.addToSummary = function (formElement) {
var $productId = $(formElement).children("[name=productId]").val();
var match = $(".summary")
.find("li[data-product-id=" + $productId + "]").length;
if (!match) {
var $productName =
$(formElement).children("[name=productName]").val(),
$productMeasure =
$(formElement).children("[name=productMeasure]").val(),
$productQuantity =
$(formElement).children("[name=productQuantity]").val();
this.products.push
(new Product
($productId,
$productName,
$productMeasure,
$productQuantity));
$.ajax({
type: "POST",
url: "/ProductsSummary/Add",
data:
{
productId: $productId,
productQuantity: $productQuantity
}
});
}
}
};
var summaryViewModel = new SummaryViewModel();
ko.applyBindings(summaryViewModel);
$("body").on("click", ".remove-item", function () {
summaryViewModel.products.remove(ko.dataFor(this));
$.ajax({
type: "POST",
url: "/ProductsSummary/Remove",
data: { productId: $(this).closest("li").data("product-id") }
});
});
});
我正在做的工作但不起作用。从技术上讲,我的代码有效,但我不会重复它。有可能吗?
服务器端团队使用 C#.NET,使用MVC 4和Razor Engine ,客户端团队是 KnockoutJS和jQuery 。
答案 0 :(得分:1)
对于空车信息,您可以执行以下操作:
<li class="is-empty" data-bind="visible: products().length < 1">
<p>Your summary is empty.</p>
</li>
对于其他人,你应该能够做到这一点(没有MVC循环):
<!-- ko foreach: products -->
<li data-bind="attr: { 'data-product-id': id }">
<div class="product-summary-actions float-right">
<button class="btn btn-danger btn-mini remove-item">
<i class="icon-remove"></i>
</button>
</div>
<div class="product-summary-quantity">
<h6 data-bind="text: infoComposition"></h6>
</div>
<div class="product-summary-description">
<p data-bind="text: name"></p>
</div>
</li>
<!-- /ko -->
并在客户端填充列表,即使您已将项目保存到会话中。在您的视图中,将现有数据序列化为JSON对象并将其保存到页面上的javascript变量,该变量可以在文档就绪时读取并推送到可观察的产品中。
var existingItems = @Html.Raw(Json.Encode((List<MyApp.Models.Data.getSpecificProductToShoppingList_Result>)Session["ProductsSummary"]));
$(document).ready(function() {
// push existingItems into products observable.
});
请注意,我的语法在JSON编码上可能不太正确。