Javascript 如何从Knockout js的用户列表中添加弹出窗口（ID和名称）

我的弹出脚本如下所示

function register_popup(id, name) {
        for (var iii = 0; iii < popups.length; iii++) {
            //already registered. Bring it to front.
            if (id == popups[iii]) {
                Array.remove(popups, iii);
                popups.unshift(id);
                calculate_popups();
                return;
            }
        }           
    }

<ul class="sidebar-name">
    <li data-bind="foreach: users">
        <a href="javascript:register_popup('qblock', data-bind=" text name");">
            <img width="30" height="30" src="my_images_path">
            <span data-bind="text: name"></span>
        </a>
    </li>
  </ul>

功能寄存器\u弹出窗口（id、名称）{
对于（变量iii=0；iii

我的html列表用户如下所示

function register_popup(id, name) {
        for (var iii = 0; iii < popups.length; iii++) {
            //already registered. Bring it to front.
            if (id == popups[iii]) {
                Array.remove(popups, iii);
                popups.unshift(id);
                calculate_popups();
                return;
            }
        }           
    }

<ul class="sidebar-name">
    <li data-bind="foreach: users">
        <a href="javascript:register_popup('qblock', data-bind=" text name");">
            <img width="30" height="30" src="my_images_path">
            <span data-bind="text: name"></span>
        </a>
    </li>
  </ul>

---

如何从Knockout的

用户列表中添加弹出窗口（ID和名称）
 我看到您在这里使用非淘汰脚本，首先，我想指出您不应该这样做（不确定您是否正在将非KO应用程序重写为KO应用程序）。如果您使用KO，您应该使用它，编写
href=“javascript:…”
东西绝对不是这样做的。话虽如此，我将首先概述解决方案

您应该创建一个viewmodel，其中包含用户列表，并维护一个保存当前可见对话的对象（或其索引，这也是可能的）。我理解你的问题，这就是你想要实现的目标

因此，让我们定义如下的viewmodel：

function conversationViewModel(userId, userName, otherData) {
    var self = this;

    self.id = ko.observable(userId);
    self.name = ko.observable(userName);
    self.messages = ko.observableArray(null);

    // perform notification subscription here, implement 
    // logic to add the messages to self.messages

};

function chatViewModel() {
    var self = this;

    self.userList = ko.observableArray(null);
    self.selectedIndex = ko.observable(null);
    self.selectedConversation = ko.computed(function() {
        var idx = self.selectedIndex();

        // has value, but a value of 0 would result in false
        if (idx || idx == 0) {
            return self.userList()[idx];
        } else {
            return null;
        }
    });

    self.selectConversation = function(index) {
        self.selectedConversation(index);
    };

    self.refresh = function() {
        // pseudo-logic to load users and converstaion data
        var stuff = server.get();

        for (var i = 0; i < stuff.length; ++i) {
            stuff[i] = new conversationViewModel(stuff.id, stuff.name, stuff);
        }

        // populate the array of active conversations 
        // with data received from the server. Perform
        // any structural transformations here.
        userList(stuff);
    };
};

var chatVM = null;
$(function() {
    chatVM = new chatViewModel();

    ko.applyBindings(chatVM);
});    

函数conversationViewModel（用户ID、用户名、其他数据）{
var self=这个；
self.id=ko.observable（userId）；
self.name=ko.observable（用户名）；
self.messages=ko.observearray（空）；
//在此处执行通知订阅，实现
//将消息添加到self.messages的逻辑
};
函数chatViewModel（）{
var self=这个；
self.userList=ko.observearray（null）；
self.selectedIndex=ko.可观察（空）；
self.selectedConversation=ko.computed（函数（）{
var idx=self.selectedIndex（）；
//具有值，但值为0将导致false
如果（idx | | idx==0）{
返回self.userList（）[idx]；
}否则{
返回null；
}
});
self.selectConversation=功能（索引）{
自选对话（索引）；
};
self.refresh=函数（）{
//加载用户和会话数据的伪逻辑
var stuff=server.get（）；
对于（变量i=0；i

然后在标记中：

<ul data-bind="foreach: userList">
    <li>
        <a data-bind="click: $parent.selectConversation.bind($data, $index)">
            <span data-bind="text: name"></span>
        </a>
    </li>
</ul>

<!-- ko if: !selectedConversation() -->
<div>
    Please select a user to view messages.
</div>
<!-- /ko -->

<!-- ko if: selectedConversation() -->
<div data-bind="with: selectedConversation">
    <h1>Conversation with <span data-bind="text: userName"></span></h1>

    <h2>Message history</h2>
    <ul data-bind="foreach: messages">
        <li>
            <!-- 
                here we assume each message object has a
                senderName and a messageText property
            -->
            <b data-bind="text: senderName"></b> said:
            <i data-bind="text: messageText"></i>
        </li>
    <ul>
</div>
<!-- /ko -->





请选择要查看邮件的用户。
谈话
消息历史记录


说：



让我们看看这一切是如何运作的。

我们定义了两个函数，第一个是会话对象的“构造函数”。它保存合作伙伴的名称、id以及与该特定用户交换的消息。这样创建的目的是，对于每个新对话，我们都有一种统一的方式来表示数据。对于每个对话，我们必须使用此函数创建一个新对象。传递给它的第三个参数是从服务器接收的数据（对于该特定转换），使用该参数提取任何其他必要的数据，例如发送消息的日期

第二个函数是整个聊天的构造函数，它保存与所有合作伙伴的对话。这定义了
selectedIndex
、
selectedConversation
属性和
selectConversation
函数。索引保存当前可见对话的-well-，索引。
selectedConversation
只是一个可观察的对象，它将索引解析为适当的数组项。将对话视图绑定到此对象。
selectConversation
只是一个改变所选索引值的函数。这用于在对话之间切换

标记是不言自明的：如果有一个选定的对话，根据计算出的可观察值，我们将显示它的详细信息。就KO而言，将其显示为弹出窗口或其他列并不重要。您应该只实现一个弹出窗口，并使用knockout绑定数据以在其中显示，而不是将它们放在前面等等。另一方面，如果还没有活动的对话（因为根本没有对话，或者因为还没有选择对话），那么我们只需显示一条正确的消息，告诉用户选择某个内容