Here was a git repo with a simple knockout binding to demonstrate, just a simple sprinkle of ko in the main view
https://github.com/evomedia247/Phoenix-and-knockout-example.git
Its built on that example project to build chat app in 8 minutes so updates with websockets. (GitHub - dwyl/phoenix-chat-example: 💬 The Step-by-Step Beginners Tutorial for Building, Testing & Deploying a Chat app in Phoenix 1.7 [Latest] 🚀 · GitHub)
UI elements are bound to the functions via the
data-bind=“text: dataItem” to display text say
or
data-bind=“if: dataItem” to display the element if var dataItem is present and
not null
Ko watched functions are defined in the script tag..
var dataItem = ko.observable('show me ');
ko.applyBindings( );
In this repo above the message display, the class switching for user styling and the message content display is all done via knockout, I pass knockout the phoenix websocket messages directly into a watched array and the UI updates when the messages update
