用 jquery.tmlp 淘汰赛

Question

我正在尝试使用 knockout 和 jquery.tmpl 构建视图。我正在使用模板来构建 table，但似乎无法将数据正确传递给模板。这是我的淘汰赛 ViewModel ：

    function ChargeModel() {
    self = this;
    self.Name = ko.observable("Ignar");
    self.Record = ko.observableArray([]);
    self.refresh = function () {
        $.ajax({
            url: "@Url.HttpRouteUrl("DefaultApi", new { controller = "KnockoutApi", action = "ShippingCharge" })",
            type: 'GET',
            dataType: 'json',
            success: function (result) {
                var mapped = ko.mapping.fromJS(result);
                self.Record(mapped);
            },
            error: function (result) {
                alert("smth bad happened");
            }
        })
    }
    self.refresh();
};

在 HTML 中：

<table class="table table-hover" data-bind="template: { name: 'peopleList' }"></table>

和模板代码：

<script type="text/html" id="peopleList">
<thead>
    <tr>
        <th>Zone</th>
        <th>${Name} </th>
        <th>${$root.Record.Name}</th>
    </tr>
</thead>

另外，我已经用简单的数据绑定检查了我的数据，但事实证明，我不能像这样简单地访问我的可观察对象：

<label data-bind="text: Record.Name"></label>

可以这样访问:

<label data-bind="text: Record().Name"></label>

P.S。我检查过 JSON，它是有效的并且包含属性 "Name"

Answer 1

您实际上应该使用本机剔除来呈现 table Native binding，但这里是：

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace MvcApplication8.Controllers
{
    public class Result
    {
        public string Zone { get; set; }
        public string Name { get; set; }
    }

    public class KnockoutAPIController : ApiController
    {
        [HttpGet]
        public string ap(string id)
        {
            List<Result> results = new List<Result>()
            {

              new Result {Zone="ZoneOne", Name="NameOne"},
              new Result {Zone="ZoneTwo", Name="NameTwo"},
              new Result {Zone="ZoneThree", Name="NameThree"}
            };

            var javaScriptSerializer = new
            System.Web.Script.Serialization.JavaScriptSerializer();
            return javaScriptSerializer.Serialize(results);
        }

    }
}


    @{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Test jquery Templates</title>
</head>
<body>

    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script src="~/Scripts/jquery.tmpl.min.js"></script>
    <script src="~/Scripts/knockout-3.4.0.js"></script>
    <script src="~/Scripts/knockout.mapping.js"></script>

    <table class="table table-hover" data-bind="template: { name: 'peopleList' }"></table>

    <script type="text/html" id="peopleList">
        <table>
            <tr>
                <td>Zone</td>
                <td>Name</td>
            </tr>

            {{each Record()}}
            <tr>
                <td>${Zone}</td>
                <td>${Name}</td>
            </tr>
            {{/each}}

        </table>

    </script>

    <script type="text/javascript">
        $(function () {
            var viewModel = function (config) {
                var self = this;
                self.Record = ko.observableArray([]);

                self.refresh = function () {
                    $.ajax({
                        url: "@Url.HttpRouteUrl("DefaultApi", new { controller = "KnockoutApi", action = "GetData", id = "1" })",
                        type: 'GET',
                        dataType: 'json',
                        success: function (result) {
                            var obj = JSON.parse(result);
                            ko.mapping.fromJS(obj, {}, self.Record);
                        },
                        error: function (result) {
                            alert("smth bad happened");
                        }
                    })
                };
                self.refresh();
            };

            var vm = new viewModel({ Zone: [], Name: [] });
            ko.applyBindings(vm);
        });
    </script>
</body>
</html>

用 jquery.tmlp 淘汰赛

Knockout with jquery.tmlp

javascript

jquery

knockout.js