Knockout with jquery.tmlp

Question

I'm trying to build view using knockout and jquery.tmpl. I'm using template, to build a table, but seems that I can't properly pass data to template. Here is my knockout 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();
};

In HTML :

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

And template code :

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

Also, I've checked my data with simple knockout data-bind, and it turns, that I can't simply access to my observable like :

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

it can be accessed like this :

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

P.S. I've checked JSON, it is valid and it contains property "Name"

You forgot to include an error description. "seems that I can't properly pass data to template." is not enough to work with. Make a js fiddle that reproduces the error. You have all the moving bits, assemble them. — Tomalak
I'm debugging code using VIsual Studio and no exception occurs. Everything I can tell, that there is no exceptions and tag <th>${$root.Record.Name}</th> isn't rendered, as expected — Jevgenijs Saveljevs
Why are you debugging client side code in Visual Studio? Wouldn't it be better to use the browser's developer tools? — Tomalak

kblau kblau · Accepted Answer · 2016-01-13T17:51:17

You should actually be using native knockout to render table Native binding, but here it is:

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>

Knockout with jquery.tmlp

1 Answers