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>

复选框和跨度的绑定(bind)确实有效。复选框被选中，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 文件夹中，这只是一个原型(prototype)。 :)

感谢您的帮助!

Answer 1

改变这个:

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

到:

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

你应该可以开始了。