用 jquery.tmlp 淘汰答案

【问题标题】：Knockout with jquery.tmlp用 jquery.tmlp 淘汰
【发布时间】：2015-03-16 06:18:51
【问题描述】：

我正在尝试使用敲除和 jquery.tmpl 构建视图。我正在使用模板来构建表格，但似乎我无法正确地将数据传递给模板。这是我的淘汰赛 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>

另外，我用简单的敲除数据绑定检查了我的数据，结果我不能像这样简单地访问我的 observable：

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

可以这样访问：

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

附：我检查了 JSON，它是有效的，它包含属性“名称”

【问题讨论】：

您忘记包含错误描述。 “似乎我无法正确地将数据传递给模板。” 不足以使用。制作一个重现错误的js小提琴。你有所有的移动位，组装它们。
我正在使用 VIsual Studio 调试代码，没有出现异常。我能说的一切，没有例外，并且标签 ${$root.Record.Name} 没有按预期呈现
为什么要在 Visual Studio 中调试客户端代码？使用浏览器的开发者工具不是更好吗？

标签： javascript jquery knockout.js

【解决方案1】：

您实际上应该使用原生敲除来渲染表 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>

【讨论】：