Ich sehe, Sie verwenden Nicht-KO-Skript hier und zuerst, ich möchte darauf hinweisen, dass Sie dies nicht tun sollten (nicht sicher, ob Sie eine Nicht-KO-App in eine KO-Version umschreiben). Wenn Sie KO verwenden, sollten Sie es verwenden und schreiben href="javascript:..." Zeug ist definitiv nicht der Weg, es zu tun. Nachdem das gesagt ist, werde ich zuerst die Lösung skizzieren.
Sie sollten ein Ansichtsmodell erstellen, das die Liste der Benutzer enthält, und auch ein Objekt (oder den Index davon, was ebenfalls möglich ist) verwaltet, der die derzeit sichtbare Konversation enthält. So wie ich Ihre Frage verstanden habe, wollten Sie das erreichen.
So lassen Sie uns ein Ansichtsmodell wie folgt definieren:
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);
});
Und dann in Ihrem Markup:
<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 -->
Mal sehen, wie das alles funktioniert.
Wir haben zwei Funktionen definiert, die erste ist der 'Konstruktor' eines Konversationsobjekts. Dies enthält den Namen des Partners, die ID und die Nachrichten, die mit diesem bestimmten Benutzer ausgetauscht werden. Dies ist so angelegt, dass wir für jede neue Konversation eine einheitliche Darstellung der Daten haben. Für jede Konversation müssen wir ein neues Objekt mit dieser Funktion erstellen. Der dritte übergebene Parameter sind die Daten, die vom Server empfangen werden (für diese bestimmte Konversation), um alle anderen notwendigen Daten zu extrahieren, wie zum Beispiel das Datum des Sendens der Nachricht.
Die zweite Funktion ist der Konstruktor des gesamten Chats, der die Gespräche mit allen Partnern enthält. Dies definiert eine , selectedConversation Eigenschaften und eine selectConversation Funktion. Der Index enthält den - nun - Index der gerade sichtbaren Konversation. Das selectedConversation ist einfach ein ko-berechnetes Observable, das den Index zum entsprechenden Array-Element auflöst. Binden Sie Ihre Konversationsansicht an dieses Objekt. Die selectConversation ist einfach eine Funktion, die den Wert des ausgewählten Index ändert. Dies wird verwendet, um zwischen Konversationen zu wechseln.
Das Markup ist selbsterklärend: Wenn es eine ausgewählte Konversation gemäß dem Wert der berechneten Observablen gibt, zeigen wir deren Details an. Die Tatsache, dass Sie es als Popup oder in einer anderen Spalte anzeigen, spielt für KO keine Rolle. Sie sollten nur ein Popup implementieren und Daten binden, um sie mit Knockout anzuzeigen, anstatt sie an die Front zu bringen und was nicht. Wenn auf der anderen Seite noch keine aktive Konversation existiert (entweder weil überhaupt keine Konversationen stattfinden oder weil noch keine ausgewählt wurde), zeigen wir einfach eine korrekte Nachricht an, die den Benutzer anweist, etwas auszuwählen.