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

时间:2011-10-05 18:27:37

标签: knockout.js

帮助,我被困住了! 我想在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>

复选框和span的绑定确实有效。选中该复选框,并将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文件夹中,这只是一个原型。 :)

感谢您的帮助!!

1 个答案:

答案 0 :(得分:6)

改变这个:

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

到:

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

你应该好好去。