Question

我有两个单独的表单输入（两个文本类型），一个在模板A中，一个在模板B中。模板A调用模板B.这两个输入形式的所有特定名称/属性＆＃39; s是独一无二的。我有两个事件处理程序，在它们自己正确命名的Template.name.events（）。

当我构建一个非常简单的测试用例时，没有问题，一切正常。但是在我更大更复杂的实际应用程序中，当我将文本输入模板B表单时，会调用正确的模板B提交事件处理程序。然后......模板提交事件处理程序被调用！即使我在处理程序B中执行event.PreventDefault调用时也会发生这种情况（旁边问题：由于被动原因而被调用的事件处理程序，或严格来说＆＃34;事件发生＆＃34;原因？）。我能够通过在A事件处理程序中检查未定义的名称属性来解决这个奇怪的行为，如果是这样的话就退出，但这只是某个地方出错的地方。关于我的代码中这种奇怪行为的可能罪魁祸首的任何建议？谢谢！

这是失败案例中两个模板的代码;第一个（entryHall，＆＃34; new-room＆＃34;表单输入）是＆＃34; A＆＃34;模板，第二个（敲门，用＃34;敲门房＆＃34;表格输入）＆＃34; B＆＃34;模板。在这两个模板的事件处理代码下面是模板定义和调用的html + handlebars代码。对于冗长和缺乏更简单的失败案例感到抱歉！

Template.entryHall.events({

    // NEW ROOM REQUEST PROCESSING
    "submit.new-room": function (event) { 
        event.preventDefault();
        if (event.target.roomName === undefined) {
            console.log ("in submit new room and roomname in event is undefined");
            return;
        }

        var rName = event.target.roomName.value;

        // Is there already a room name of this same name in the Rooms collection?

        var roomsCursor = Rooms.findOne({ roomName: rName });

        if (roomsCursor != null) {

            // It's a dup; don't allow it
            event.target.roomName.value = "Duplicate room name, try again";
            return(null);
        }

        var uName = Session.get ('userName');

        // It's a unique name, put it in the Rooms collection.

        Rooms.insert({
            roomName : rName,
            owner : uName,
            members: [],      // an array of user names
            knockRequests: [],  // an array of user names
            chat : null,
            files : null
        });


        // We have the room document added to the Rooms collection, now we have to
        // add the room to the owned list for the user

        var userEntry = PZUsers.find({ userName : uName }).fetch();

        PZUsers.update({ _id : userEntry[0]._id},
                       { $push: { ownedRooms: rName }});

        ownedRoomCount++;

        roomReactor.changed();

        event.target.roomName.value = "";   
    }   
});

Template.knock.events({

    // Knock on a room request processing

    "submit.knock-room": function (event) {
        // Prevent default browser form submit
        event.preventDefault();
        var knockName = event.target.knockName.value;
        event.target.knockName.value = "";
        console.log("in knock room submit!");

        // Can only knock on a room that exists!

        var knockRoomCursor = Rooms.findOne({ roomName: knockName });
        if (knockRoomCursor == null) {
            console.log ("no such room found to knock on");
            return;
        }

        // Add a knock request to this room, and add this room the the user's  list of "open knocks" rooms

        var roomEntry = Rooms.find({ roomName : knockName }).fetch();
        console.log ("_id of room: " + knockName + " is: " + roomEntry[0]._id);

       Rooms.update({ _id : roomEntry[0]._id },
               { $push: { knockRequests: Session.get('userName') }});
       roomReactor.changed();   
    }
});

这里是调用html：

<template name="entryHall">

    <h2>Welcome {{userName}}</h2>
    <h3>Create a new room:</h3>
    <div class="roomName">
        <form class="new-room">
            <input type="text" name="roomName" id="roomName" placeholder="Select a room name" />
        </form>
    </div>

    {{markNoOwnedRooms}}
    {{#each ownedRooms}}
        {{#if firstOwnedRoom}}
            <h3>Enter one of your own rooms:</h3>
        {{/if}}
        {{ > room }}
    {{/each}}

    {{markNoMemberRooms}}
    {{#each memberRooms}}
        {{#if firstMemberRoom}}
            <h3>Enter one of your member rooms:</h3>
        {{/if}}
        {{ > room }}
    {{/each}}

    <h3>Knock to request entry:</h3>
    {{ > knock }}


</template>

<template name="room">
    <li>{{this}}</li>
</template>

<template name="knock">
    <div class="knockName">
        <form class="knock-room">
            <input type="text" name="knockName" id="knockName" placeholder="Enter room name" />
        </form>
    </div>
</template>

单个文本输入事件

0 个答案: