The Goal
制作动态产品列表。
场景
我有一个包含产品的购物应用程序。当我点击add button的产品，我想在侧边栏中显示我添加的产品。
问题总结（您只需阅读此内容）
我的代码中有以下代码ProductsSummary/Index.cshtml（使用 Razor 引擎）：
<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当我在会话为空时添加一些内容时，作为淘汰赛的模型；最后一项是显示会话中的产品。
我感觉有点"DRY http://en.wikipedia.org/wiki/Don%27t_repeat_yourself"就在这儿。无论会话是否存在，如何重复使用相同的模板？
详细问题
我的代码中有以下代码ProductsSummary/Index.cshtml（使用 Razor 引擎）：
<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会话存在。如果是，则应用程序会在屏幕上显示我在摘要中添加的产品列表。
案例会议is null，如您所见，应用程序在li with is-empty class.
重点是：我really之后需要“模板”<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按钮，“摘要为空”。消息消失，用户添加的产品以列表中项目的格式显示（与我之前通过的[第一个/第二个片段]相同的模板）。
- “好的，我现在转向另一类产品。” — *用户点击“电视”类别* —“天哪！看看这台电视！我现在就添加到我的摘要中！” — *用户单击随机电视的“添加按钮”。* — 列表中已有一个产品，但出现了另一个产品（电视）。
- “哦，没关系。我没有钱。我会把这些项目从我的摘要中删除。” — *用户单击摘要上每个产品的“删除按钮”* — 如果没有产品，摘要将显示：“摘要为空”。就像魔法一样，没有任何刷新之类的东西。
（有趣吧？）
KnockoutJS 脚本
$(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") }
});
});
});
最终会发生什么？
我正在做的事情有效和无效。从技术上讲，我的代码可以工作，但我不会重复它。是否可以？
技术细节
服务器端团队是带有 MVC 4 和 Razor 引擎的 C#.NET客户端团队是KnockoutJS 和 jQuery.
