Question

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.

ASPX Page

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" ClientIDMode="Static" Inherits="EditableGridPrototype._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Styles/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="Styles/jquery.tmpl.js" type="text/javascript"></script>
    <script src="Styles/knockout-1.2.1.debug.js" type="text/javascript"></script>
    <script src="Styles/knockout.mapping.js" type="text/javascript"></script>
    <script src="Scripts/jquery.json-2.2.min.js" type="text/javascript"></script>
    <script src="Grid.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <h3>Transactions</h3>
        <input type="checkbox" data-bind="checked: canSelect" />
        <span data-bind="text: existingTransactions().length" />
        <table width="99%" style="margin-top: 10px" data-bind='template: "existingTransactionsTemplate"'>
            <script type='text/html' id='existingTransactionsTemplate'> 
            {{each(i, tran) existingTransactions()}}        
                        <tr><td>hello</td></tr>          
            {{/each}}                                  
        </script>
        </table>
</asp:Content>

The bindings for the checkbox and span do work. The checkbox is checked, and 2 is written out to the page.

Here’s my js Grid.js file

$(document).ready(function () {

    var transactionsViewModel = {
        canSelect: ko.observable(true),
        existingTransactions: ko.observableArray([
            { canSelect: true, amount: 100 },
            { canSelect: false, amount: 200}])
    };

    ko.applyBindings(transactionsViewModel);

});

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. 🙂

Thanks for your help!!

Answer 1

Change this:

 <span data-bind="text: existingTransactions().length" />

to:

 <span data-bind="text: existingTransactions().length"></span>

and you should be good to go.