0

ノックアウト.jsを使用してHTMLテーブルにデータを入力しようとしているWebアプリケーションがありますが、テーブルはまだ空です。私のデータは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

Your code should work fine. You haven't shown where you are calling the GetComputation function but here's a full working example.

Controllers:

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);
    }
}

Index view (~/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>

In this example I am calling the GetComputation immediately but you could adapt the code and invoke it whenever you want. Also notice that I have applied the data-bind="foreach: paymentSchedules" on the <tbody> and not the <tr> element.

于 2013-01-23T07:56:06.650 に答える
3

テストはしていませんが、データ バインド data-bind="foreach: paymentSchedules"を tr ではなく tbody に移動してみてください。

foreach ノックアウトのドキュメントも同じです。http://knockoutjs.com/documentation/foreach-binding.htmlを参照してください

于 2013-01-23T07:55:52.000 に答える