Я вижу, что вы используете скрипт non-knockout здесь и сначала, я хотел бы указать, что вы не должны этого делать (не уверен, что вы переписываете приложение, отличное от 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);
});
, а затем в разметке:
<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 -->
Давайте посмотрим, как все это работает.
Мы определили две функции: первый - «конструктор» объекта беседы. Это содержит имя партнера, идентификатор и сообщения, обмениваемые с этим конкретным пользователем. Это создано так, что для каждого нового разговора мы имеем единый способ представления данных. Для каждой беседы мы должны создать новый объект, используя эту функцию. Третьим параметром, переданным ему, являются данные, полученные с сервера (для этого конкретного преобразования), используйте это для извлечения любых других необходимых данных, таких как дата отправки сообщения.
Вторая функция - это конструктор всего чата, в котором содержатся разговоры со всеми партнерами. Это определяет свойства selectedIndex, selectedConversation и функцию selectConversation. В индексе содержится индекс well-index текущего видимого разговора. selectedConversation является просто вычисляемым ko, который разрешает индекс соответствующему элементу массива. Привяжите свой разговор к этому объекту.selectConversation - это просто функция, которая изменяет значение выбранного индекса. Это используется для переключения между цепочками.
Разметка сама по себе поясняет: если есть выделенный разговор, то в соответствии с значением вычисленного наблюдаемого мы показываем его детали. Тот факт, что вы отображаете его как всплывающее окно или в другом столбце, не имеет значения, насколько это касается KO. Вы должны реализовать только одно всплывающее окно и привязать данные для отображения в нем, используя нокаут, вместо того, чтобы выводить их на передний план и еще много чего. Если, с другой стороны, активного сеанса не существует (либо из-за отсутствия каких-либо разговоров, либо из-за того, что никто еще не выбран), мы просто показываем правильное сообщение, в котором пользователю предлагается выбрать что-либо.