0

我有一个 Web 应用程序，我正在尝试使用 knockout.js 填充我的 html 表，但我的表仍然是空的。我的数据是通过 ajax 调用的。jQuery 和 Knockout.js 都被引用到我的页面。这是代码；

HTML

 <table id="payment_schedule">
            <thead>
                <tr class="tableHeader">
                    <th width="50px">
                        Index
                    </th>
                    <th width="50px">
                        Due Date
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr data-bind="foreach: paymentSchedules">
                    <td data-bind="text: Index"></td>
                    <td data-bind="text: Month"></td>
                </tr>
            </tbody>
        </table>

JavaScript 函数

 function GetComputation() {
        $.ajax({
        url: '/UnitSearch/CalculateMortgage',
        cache: false,
        dataType: 'json',
        success: function (data) {
                viewModel.paymentSchedules(data.PaymentSchedules);
        }
    });
}
var data = [];
var viewModel = {
    paymentSchedules: ko.observableArray(data)
};
ko.applyBindings(viewModel);

从ajax返回的数据

在此处输入图像描述

4

2 回答 2

5

您的代码应该可以正常工作。您尚未显示调用GetComputation函数的位置，但这是一个完整的工作示例。

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

public class UnitSearchController : Controller
{
    public ActionResult CalculateMortgage()
    {
        var data = new 
        {
            PaymentSchedules = new[] 
            {
                new { Index = "Reservation Fee", Month = "23-Jan-13" },
                new { Index = "Reservation Fee", Month = "25-Jan-13" },
            }
        };
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

索引视图 ( ~/Views/Home/Index.cshtml)：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <table id="payment_schedule">
        <thead>
            <tr class="tableHeader">
                <th>Index</th>
                <th>Due Date</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: paymentSchedules">
            <tr>
                <td data-bind="text: Index"></td>
                <td data-bind="text: Month"></td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.7.1.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/scripts/knockout-2.1.0.js")"></script>
    <script type="text/javascript">
        var data = [];
        var viewModel = {
            paymentSchedules: ko.observableArray(data)
        };
        ko.applyBindings(viewModel);

        function GetComputation() {
            $.ajax({
                url: '/UnitSearch/CalculateMortgage',
                cache: false,
                success: function (data) {
                    viewModel.paymentSchedules(data.PaymentSchedules);
                }
            });
        }

        // I am calling the GetComputation function immediately in this example
        // to populate the table with data but you could call it whenever you want
        GetComputation();
    </script>
</body>
</html>

在此示例中，我GetComputation立即调用，但您可以调整代码并随时调用它。另请注意，我已在元素data-bind="foreach: paymentSchedules"上应用了<tbody>而不是<tr>元素。

于 2013-01-23T07:56:06.650 回答
3

没有测试过，但你可以尝试将数据绑定移动 data-bind="foreach: paymentSchedules"到 tbody 而不是 tr 吗？

foreach 淘汰赛文档也是如此。参考http://knockoutjs.com/documentation/foreach-binding.html

于 2013-01-23T07:55:52.000 回答