Question

我是jQuery和asp.net的初学者。我使用SignalR创建了一个简单的聊天应用程序，您可以在此处找到设计 fiddle

如果用户在之前与其他用户聊天时其他用户呼叫，我该如何创建该聊天设计的新实例。在这里，我想我可以将其转换为用户控制。但我不希望我用于其他聊天设计的Id相同，而且那些生成的实例应该有不同的工作方式，我的意思是userA调用userB并且同时{ {1}}调用userC然后必须以这样的方式创建它们，使它们在处理自己的调用时必须是唯一的（就像FB Chat一样）。

成功创建新实例后可能出现的另一个问题是它们可能无法自动附加到jQuery函数和服务器端代码。如果是这样，无论如何也要解决这个问题？

在问这里之前我搜索了很多（也许我不知道要搜索的确切关键字）。

编辑：许多jQuery开发人员建议我使用 Knockout.js 或 Backbone.js 或简单的jQuery。但我认为有一些简单的方法可以使用ASP.NET函数来实现这一点，例如用户控件或 HTTP处理程序（或其他）。我什么都不知道。那么，请建议我选择哪个概念？请详细解释（如果可能的话，用简单的例子）。

jquery相关答案也欢迎。

单一实例

enter image description here

多个实例

enter image description here

Answer 1

使用JQuery填充或弹出新的聊天实例，但使用jquery更改您的ID。我建议根据父容器完成所有样式和ID，这样您就可以轻松地抓取父级，复制它并更改ID或内容。

我会保留一个非填充的聊天窗口，其ID类似于“updateme1”updateme2等，然后一旦我将其作为模板，我将逐一用相关内容替换所有ID。

你做得对，我不认为你需要调查它的信号。 SignalR将能够帮助您传递特定参数，例如“requirechatwindow = true或false”，具体取决于此人是否与当前人聊天，但您也可以通过当前的开放聊天会话在客户端上执行此操作。如果当前聊天会话不包含A和B之间的聊天，则打开具有新ID的新窗口，并将数据从= A和data-to = B作为掌上电脑，这样您就知道此聊天在A和B等之间

希望这有帮助

更新小提琴和技巧

以下是Your fiddle edited to show creation and multiple ids的修正案我必须调整你的一些css来查看不同位置的方框

Updated the code with some comments

技术很简单：

您在页面上创建的html模板可能位于隐藏区域
然后你用它在容器中创建新元素，并有一个句柄来拾取这个元素，例如在我的代码中，currentid是我的句柄，但我知道容器名称所以我只会在实际容器中填充的拾取模板避免与模板本身冲突。
分配新的ID，然后您可以使用任何事件或任何特殊对象。

然后，您可以从新ID或其中可能包含的任何其他句柄中拾取新元素。例如，我刚刚在其上添加了一个点击，并确认隐藏它。

$('#doubleme').click(function(){    
    var currentid = $("#chattemplate .chat-outline").attr('data-tid');     
    var newid = parseInt(currentid,10) + 1;
    $("#chatcontainers").append($("#chattemplate").html());    
    $("#chatcontainers .chat-outline").attr('id',"id"+newid); 
    $("#chattemplate .chat-outline").attr('data-tid',newid);  
});

你实际上只需要这五行代码，如果你去小提琴我已经评论了所有这些代码，但它们很容易理解。我正在使用小提琴中使用的选择器，但可以使用data-handle-for等属性或您可以给出的任何名称进一步优化这些选择器。

如果您正在考虑使用SignalR，那么在您的新请求的集线器响应中，您可以调用可以在客户端上设置所有内容的开始聊天窗口。使用该数据句柄的任何后续消息都可以在此新聊天窗口中更新。

例如，我假设你创建了一个名为“chatwindow7”和“chatwindow8”的新组，它在你的send方法中进行往返等等，只向这个组的用户广播。然后每个用户可能打开多个窗口，但您只需要为具有该数据句柄的消息提取chatwindow7并更新它等等。

如果您只使用一对一聊天用户，那么您也可以使用连接ID，这意味着所有广播的消息都将包含发件人和收件人（通过deafault）连接ID，您只需要通过连接拾取窗口id处理并更新其消息列表或其他任何内容。

Answer 2

最简单的方法是用类属性替换id属性。

<div id="chat-outline">
    ...
</div>

变为

<div class="chat-outline">
    ...
</div>

并适当更新您的CSS。

.chat-outline
{
    background-color: gray;
    ....
}

然后使用text / template标签使其可用于jQuery。

<script type="text/template" id="chat-template">
    <div class="chat-outline">
        ...
    </div>
</script>

请注意，因为浏览器会忽略它们无法识别的脚本类型，所以html呈现引擎会忽略它，但是因为它有一个id，所以它对jQuery是可见的，因此可以访问：

<div id="container">
</div>
<script type="text/javascript">
    $(function() {
        var chatTemplate = $('#chat-template').html();
        $('#container').append(chatTemplate);  // First instance
        $('#container').append(chatTemplate);  // Second instance
        $('#container').append(chatTemplate);  // Third instance
    });
</script>

当然，如果您的代码需要id属性作为聊天实例的句柄，您可以创建一个函数来创建给定id的聊天实例html。在这种情况下，我将使用下划线来提供随机id，模板和迭代函数，但是很容易使用另一个库，或者编写自己的库。

<div id="container">
</div>
<script type="text/template" id="chat-template">
    <div class="chat-outline" id="<%= id %>">
        ...
    </div>
</script>
<script type="text/javascript">
    var createChatInstance(idstring) {
        return _.template($('#chat-template').html(), { id: idstring });
    }

    $(function() {
        var chatTemplate = $('#chat-template').html();
        // Create an array of 3 unique ids by which chat instances will be accessed.
        var chatIds = [_.uniqueId('chat-outline'), 
                       _.uniqueId('chat-outline'), 
                       _.uniqueId('chat-outline')];
        _.each(chatIds, function(chatId) {
            $('#container').append(createChatInstance(chatId));
        });
        // You now have an array of 3 unique ids matching 3 divs.
        // You can access individual sub-divs via descendent class matching from the id
        // thus: $('#' + chatIds[n] + ' .chat-message').keyup(...code handling event...);

    });
</script>

此时，如果你想进一步采用这种架构，你真的需要考虑调查像backbone.js这样的东西。

希望这有帮助。

创建一组元素的新实例

2 个答案: