Knockout with jquery.tmlp

Knockout with jquery.tmlp

本文关键字：tmlp jquery with Knockout      更新时间：2023-09-26

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

    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>

附言我已经检查了 JSON，它是有效的，它包含属性"名称"

您实际上应该使用本机挖空来呈现表本机绑定，但这里是：

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>
相关文章：