Question

我有一个小的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（）”不是一个功能，但它已经存在。

Answer 1

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

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

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

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

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

无法从underscoreJS呈现的模板调用现有方法

1 个答案: