4

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

每当用户在与其他用户聊天时被其他用户呼叫时，我如何创建该聊天设计的新实例。在这里，我想我可以将其转换为用户控件。但我不想拥有与Id我用于其他聊天设计的相同的，并且那些生成的实例应该以不同的方式工作，我的意思是如果userA调用userB和同时userC调用userB，那么它们必须以这样一种方式创建，即它们必须是唯一的处理自己的电话（就像 FB 聊天一样）。

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

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

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

也欢迎与 jquery 相关的答案。

单实例

在此处输入图像描述

多个实例

在此处输入图像描述

4

2 回答 2

4

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

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

你做对了，我不认为你需要研究它的 signalR。SignalR 将能够根据此人是否与当前人聊天来帮助您传递特定参数，例如“requirechatwindow=true 或 false”，但您也可以通过当前打开的聊天会话在客户端上执行此操作。如果当前聊天会话不包含 A 和 B 之间的聊天，则使用新 ID 打开新窗口并将 data-from= A 和 data-to=B 作为占位符，这样您就知道此聊天是在 A 和 B 之间进行的等等

希望这可以帮助

更新的小提琴和技术

这是对您的小提琴进行了修复以显示创建和多个 id我不得不调整您的一些 css 以查看不同位置的框

用一些注释更新了代码

该技术很简单：

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

  4. 然后，您可以从新 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”的新组，它在您的发送方法中进行往返，依此类推，仅广播给该组的用户。然后每个用户可能会打开多个窗口，但您只需要为带有该数据句柄的消息拾取 chatwindow7 并更新它等等。

如果您仅使用一对一聊天用户，那么您也可以使用连接 ID，这意味着广播的所有消息都将具有发送者和接收者（默认）连接 ID，您只需要使用连接 ID 句柄拾取窗口和更新其消息列表或其他内容。

于 2013-01-07T15:14:21.777 回答
3

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

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

变成

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

并适当地更新你的 CSS。

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

然后使用文本/模板标签使其可用于 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这样的东西。

希望这可以帮助。

于 2013-01-15T03:24:24.263 回答