Question

我正在使用knockout.js显示我购物车中的文章数量。购物车信息保存在Model ShoppingCartItem的列表中。因为我没有读到关于直接使用knockout.js绑定列表的方法，所以我将列表项推送到数组中并在之后绑定此数组。

但无论我在尝试什么，输出始终是＆＃34;您的购物车中有文章。＆＃34;。因此，我的数组长度不会显示。

我在bundle配置文件中添加了knockout.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"));

我的观点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; }
    }
}

我想使用knockout.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">&nbsp;</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>

我还尝试将绑定应用于以下内容：

ko.applyBindings(cartItems, document.body);

结果相同。我的数组长度不会显示。

如果有人能告诉我自己做错了什么，我真的很感激。

Answer 1

将您的绑定更改为： ko.applyBindings(viewModel, document.getElementById("top-cart"));

将您的脚本移到HTML下方。它的方式是在创建HTML元素之前运行。

http://jsbin.com/sazupasope/edit?html,js,output

在MVC5中将通用列表与knockout.js绑定

1 个答案: