Note that there are some explanatory texts on larger screens.

plurals
  1. POKnockout.js Cannot find template with ID error
    text
    copied!<p>Help, I'm stuck! I'm trying to do a simple task in knockout.js. Basically, I'd like to have an array of items generate a series of rows in a table. I'm using jquery, and jquery.tmpl.js. I've done this before many times, but for some reason it is not working. Here's my code.</p> <p>ASPX Page </p> <pre><code>&lt;%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" ClientIDMode="Static" Inherits="EditableGridPrototype._Default" %&gt; &lt;asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"&gt; &lt;script src="Styles/jquery-1.6.4.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="Styles/jquery.tmpl.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="Styles/knockout-1.2.1.debug.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="Styles/knockout.mapping.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="Scripts/jquery.json-2.2.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="Grid.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/asp:Content&gt; &lt;asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"&gt; &lt;h3&gt;Transactions&lt;/h3&gt; &lt;input type="checkbox" data-bind="checked: canSelect" /&gt; &lt;span data-bind="text: existingTransactions().length" /&gt; &lt;table width="99%" style="margin-top: 10px" data-bind='template: "existingTransactionsTemplate"'&gt; &lt;script type='text/html' id='existingTransactionsTemplate'&gt; {{each(i, tran) existingTransactions()}} &lt;tr&gt;&lt;td&gt;hello&lt;/td&gt;&lt;/tr&gt; {{/each}} &lt;/script&gt; &lt;/table&gt; &lt;/asp:Content&gt; </code></pre> <p>The bindings for the checkbox and span do work. The checkbox is checked, and 2 is written out to the page.</p> <p>Here's my js Grid.js file</p> <pre><code>$(document).ready(function () { var transactionsViewModel = { canSelect: ko.observable(true), existingTransactions: ko.observableArray([ { canSelect: true, amount: 100 }, { canSelect: false, amount: 200}]) }; ko.applyBindings(transactionsViewModel); }); </code></pre> <p>The template that is used is trivial, I'd like it to just display rows first, so I know it all works. And yes, I put the js files in the Styles folder by accident, this is just a prototype. :)</p> <p>Thanks for your help!!</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload