0

我有一个小的 Backbone / Underscore 应用程序。我已经渲染了一个模板，同时渲染了一个按钮的方法调用“onclick”（顺便说一句，它工作顺利）。被调用的函数呈现另一个模板，该模板具有另一个方法调用按钮的“onclick”。

  • #showTransportsTemplate：第一个模板 / 有一个“传输”模型传递给它
  • bookTicket(tid)：第一个函数/使用“tid”从集合中获取关联的传输模型，并将它们设置为“预订模型”，然后传递给第二个模板
  • #confirmBookingTemplate：第二个模板
    • confirmBooking() ：第二种方法（存在但未被识别，因此未被调用）

这是代码：

app.js 的相关部分：

function bookTicket(tid)
{
    alert("received tid: "+tid);
    var transport = transportList.findWhere({id:tid});
    console.log(transport);



    var newBooking = new Booking();
    newBooking.set('id',"b"+getBookingId());
    newBooking.set('mode',transport.get('mode'));
    newBooking.set('source',transport.get('source'));
    newBooking.set('destination',transport.get('destination'));
    newBooking.set('date',transport.get('date'));
    newBooking.set('class',transport.get('class'));
    newBooking.set('rate',transport.get('rate'));

    var confirmBookingTemplate = _.template($('#confirmBookingTemplate').html(), {booking: newBooking});
               alert(confirmBookingTemplate); // for testing purposes


                $(confirmBooking.el).show();
                 $(confirmBooking.el).html(confirmBookingTemplate);                 
}

function confirmBooking()
{
    alert("confirmBooking"); // no further code written coz this function is not getting called
}

两个模板：

<script type="text/template" id="showTransportsTemplate">

            <table border="1">

                <tr>

                <th> Source </th>
                <th> Destination </th>
                <th> Date Available </th>
                <th> Class </th>
                <th> Rate </th>
                <th> Book </th>
                </tr>



                <% _.each(selTransports, function (transport) {  

                    var myid= transport.get("id");

                %>

                <tr>

                        <td align="center"> <%= transport.get("source") %> </td>
                        <td align="center"> <%= transport.get("destination") %> </td>
                        <td align="center"> <%= transport.get("date") %> </td>
                        <td align="center"> <%= transport.get("class") %> </td>
                        <td align="center"> <%= transport.get("rate") %> </td>
                        <td> <input type="button" onclick="bookTicket('<%= myid %>')" value="Book"> 
                         </input>
                        </td>
                        <td> <%= myid %> </td>
                    </tr>
                  <%
                        });

                    %>

            </table>
        </script>

        <script type="text/template" id="confirmBookingTemplate">
             <br /><br />
            <h3> Booking Details </h3>

            <br />

            <table cellspacing="3" cellpadding="3">
            <tr>
            <td> <b> Customer Name: </b> </td>
            <td> <input type="text" id="cname" /> </td>
            </tr>


            <tr>
                <td colspan="2"> 

                    <%
                    var travel;
                        if (booking.get("mode") === "F") travel = "Flight"
                        else if (booking.get("mode") === "B") travel = "Bus"
                        else if (booking.get("mode") === "T") travel = "Train"
                    %>

                    <b><%= travel %></b> from <b><%=booking.get("source")%></b> to <b><%=booking.get("destination")%></b>
                   in <b><%=booking.get("class")%></b> class on <b><%=booking.get("date")%></b> 
                </td>
            </tr>

            <tr>
            <td> <b> Cost per ticket: </b> </td>
            <td> Rs. <%= booking.get("rate") %> </td>
            </tr>

             <tr>
            <td> <b> No. of Adults: </b> </td>
            <td> <input type="text" id="adults" /> </td>
            </tr>

             <tr>
            <td> <b> No. of  Children: </b> </td>
            <td> <input type="text" id="children" /> </td>
            </tr>

            <tr>
            <td> <b> Total Amount: </b> </td>
            <td> <output  id="totalAmount"> </output> </td>
            </tr>

            <tr>
                <td colspan="2" align="center"> 

                <input type="button" value="Book Ticket" id="confirm" onclick="confirmBooking()">
                </td>

            </tr>
    </table>
        </script>

我尝试使用 Chrome，错误是“对象不是函数”。Firebug 说：“confirmBooking()”不是一个函数，但它已经存在。

4

1 回答 1

1

Underscore 的模板函数在评估模板时使用 javascriptwith块，这意味着任何“非限定名称”都被假定为传入该template方法的数据对象的一部分。在这种情况下，confirmBooking不是该对象的一部分，因此模板无法找到它。

如果你真的希望在你的模板中调用一个全局函数（并且你应该三思而后行在全局命名空间中定义函数），那么你可以通过显式引用该window对象来实现，如下所示：

window.someGlobalFunction = function() {
    return "It worked!";   
}

<script type="text/template" id="template">
    <%= window.someGlobalFunction() %>
</script>

一个有效的例子：http: //jsfiddle.net/dmillz/pqjtR/

于 2013-08-06T15:38:57.863 回答