Knockout.js 找不到 ID 错误的模板

Question

救命，我被困住了！ 我正在尝试在 knockout.js 中执行一项简单的任务。基本上，我想让一个项目数组在表中生成一系列行。我正在使用 jquery 和 jquery.tmpl.js。我以前曾多次这样做过，但由于某种原因它不起作用。这是我的代码。

ASPX 页面

<%@ 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>

复选框和跨度的绑定起作用。该复选框被选中，并且 2 被写入页面。

这是我的 js Grid.js 文件

$(document).ready(function () {

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

    ko.applyBindings(transactionsViewModel);

});

使用的模板很简单，我希望它首先显示行，所以我知道这一切都有效。是的，我不小心把js文件放在Styles文件夹中，这只是一个原型。 ：）

感谢您的帮助！！

Answer 1

将其更改

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

为：

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

就可以了。