[英]Binding a generic list with knockout.js in MVC5
I am using knockout.js to display the amount of articles I have in my shopping cart. 我正在使用淘汰表.js来显示购物车中的文章数量。 The shopping cart information are saved in a List of the Model ShoppingCartItem.
购物车信息保存在Model ShoppingCartItem的列表中。 Because I did not read about a way to bind a list with knockout.js directly I am pushing my list items into an array and bind this array afterwards.
因为我没有读过直接用knockout.js绑定列表的方法,所以我将列表项推入数组中,然后绑定此数组。
But no matter what I am trying the output is always "You have Articles in your shopping cart.". 但是,无论我尝试什么,输出始终是“您的购物车中有文章”。 So the length of my array is not displayed.
因此,不会显示我数组的长度。
I added knockout.js in the bundle config file: 我在捆绑包配置文件中添加了kickout.js:
bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
"~/Scripts/knockout-3.3.0.js"));
bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
"~/Scripts/knockout-3.3.0.debug.js"));
bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
"~/Scripts/knockout.validation.js"));
bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
"~/Scripts/knockout.validation.debug.js"));
My view Model ShoppingCartItem: 我的看法Model ShoppingCartItem:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace OnlineShop.Models
{
public class ShoppingCartItem
{
public Products product { get; set; }
public int amount { get; set; }
}
}
My partial view where I want to use model binding with knockout.js: 我想将模型绑定与strockout.js结合使用的局部视图:
@model List<OnlineShop.Models.ShoppingCartItem>
<script type="text/javascript">
var myArray = [];
@foreach (var d in Model)
{
@:myArray.push("@d");
}
var viewModel = {
cartItems: ko.observableArray(myArray)
};
ko.applyBindings(cartItems, document.getElementById("test"));
</script>
<div id="top-cart" class="clearfix">
<div class="shoppingcart-txt">
@if (Model != null && Model.Count() > 0)
{
double sum = 0.0F;
for (int i = 0; i < Model.Count(); i++)
{
sum = sum + (Model[i].amount * Model[i].product.PurchasePrice);
}
<p>
You have <span id = "test" data-bind="text: cartItems().length"> </span> articles in your shopping cart. <br />
<strong>
Sum: @sum.ToString("#,##0.00") EUR <br />
excl. 3.00 EUR shipping costs
</strong>
</p>
}
else
{
<p>
You have no articles in your shopping cart.
</p>
}
</div>
<div class="shoppingcart-img">
<a href="@Url.Action("ShoppingCart", "Home")">
<img src="~/Photos/shoppingcart.png" alt="" border="0" />
</a>
</div>
</div>
I also tried to apply the bindings with the following: 我还尝试将绑定应用于以下内容:
ko.applyBindings(cartItems, document.body);
With the same result. 结果相同。 The length of my array is not displayed.
我的数组长度未显示。
I would really appreciate if anyone can tell me what I am doing wrong. 如果有人能告诉我我做错了,我将不胜感激。
Change your binding to: ko.applyBindings(viewModel, document.getElementById("top-cart"));
将绑定更改为:
ko.applyBindings(viewModel, document.getElementById("top-cart"));
And move your script below the HTML. 并将您的脚本移到HTML下方。 The way it is, is runnig before the HTML element is created.
创建HTML元素之前先运行它。
http://jsbin.com/sazupasope/edit?html,js,output http://jsbin.com/sazupasope/edit?html,js,输出
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.