Knockoutjs Single Page Anwendungsbindungen

Question

Hallo, ich arbeite an einer .Net Anwendung mit einer einzigen Seite Knockoutjs, Sammy.js und Rest Web API. Ich bin etwas neu in diesen Bibliotheken und ich habe ein paar Kern-Design-Probleme kennengelernt und ich hoffe, einige Einblicke zu gewinnen.

Das Hauptproblem, das ich habe, ist Knockouts ko.applybinding gezielt auf bestimmte Elemente.

this.get("#/Classroom", function(context) { 
    dataPack.build(PageLoc, context) 
    appPres.reload(); 
    ko.applyBindings(new classroomVmCore.View(), document.getElementById('view-Classroom')); 

}); 

Da dies eine einzelne Seite Anwendung ist, muss ich meine Ansichten dynamisch anhängen. Das dataPack.build ist, was meine Ansicht ergreift und an den Kontext der einzelnen Seite bindet. Diese Funktionalität funktioniert wie erwartet, aber wenn es um ko.applyBindings kommt finde ich die folgenden Probleme auftreten ..

1. Jede Aktualisierung der Seite verliert meiner Meinung nach Modell und wenn die sammy.js Hash fehlt nicht getroffen wird, die Daten. Dieses Problem tritt hauptsächlich bei allen freigegebenen Inhalten auf (z. B. Navigationselemente, Layoutelemente usw.). Da diese Daten über ein eigenes Anzeigemodell verfügen, wenn ich erneut auf den Hash-Wert #/Classroom klicke, gehen diese freigegebenen Modelle verloren.

2. Ist das eine weitere Option neben der Verwendung der Konstruktorfunktion für mein Ansichtsmodell? Das auf eine Variable zu setzen und dann zu versuchen, diese Variable anzupassen oder hinzuzufügen, scheint mein Modell nicht anzupassen.

suche ich im Wesentlichen für eine Art und Weise meines Modell jederzeit zu aktualisieren/zu aktualisieren, damit ich frisch eine Seite behandeln.

Hat jemand diese Bibliotheken für einen SPA in diesen Fragen verwendet? Wie hast du deine Ansichten und Bindungen strukturiert?

Jede Hilfe oder Ideen werden sehr geschätzt.

Answer 1

Ich habe meine eigene Website erstellt (nicht hier, siehe Profil, wenn Sie es wünschen) als SPA mit Knockout. Ich benutze Vorlagen, um mein Ziel zu erreichen. Dies ist ein kurzes Beispiel dafür, wie ich es mache.

Sorry, ich habe niemals sammy.js verwendet, um etwas dazu zu sagen.

function MainVM() { 
 
    var self = this; 
 

 
    self.ContactVM = ko.observable(new AboutMeVM('John', 'code')) 
 

 
    self.Content = ko.observable({ 
 
    name: 'HomeTemplate' 
 
    }); 
 

 
    self.ShowHome = function() { 
 
    // Page using MainVM 
 
    self.Content({ 
 
     name: 'HomeTemplate' 
 
    }); 
 
    } 
 

 
    self.ShowContact = function() { 
 
    // Page with on demand VM 
 
    self.Content({ 
 
     name: 'ContactTemplate', 
 
     data: new ContactVM('me', "555-5555") 
 
    }) 
 
    } 
 

 
    self.ShowContactSteve = function() { 
 
    // Page with on demand VM 
 
    self.Content({ 
 
     name: 'ContactTemplate', 
 
     data: new ContactVM('Steve', "555-1234") 
 
    }) 
 
    } 
 

 
    self.ShowAboutMe = function() { 
 
    // Page with a static VM 
 
    self.Content({ 
 
     name: 'AboutMeTemplate', 
 
     data: self.ContactVM 
 
    }); 
 
    } 
 
} 
 

 

 

 
function ContactVM(name, number) { 
 
    var self = this; 
 
    self.Name = ko.observable(name); 
 
    self.Phone = ko.observable(number); 
 
} 
 

 
function AboutMeVM(name, job) { 
 
    var self = this; 
 
    self.Name = ko.observable(name); 
 
    self.Job = ko.observable(job); 
 
} 
 

 
ko.applyBindings(new MainVM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<script type="text/html" id="AboutMeTemplate"> 
 
    About me:<br> i am <span data-bind="text: Name"></span> and I <span data-bind="text: Job"></span> 
 
</script> 
 

 
<script type="text/html" id="ContactTemplate"> 
 
    Contact <span data-bind="text: Name"></span>: <span data-bind="text: Phone"></span> 
 
</script> 
 

 
<script type="text/html" id="HomeTemplate"> 
 
    Welcome to my website 
 
</script> 
 

 
<div> 
 
    <h3>Links</h3> 
 
    <a data-bind="click: ShowHome">Home</a> <br> 
 
    <a data-bind="click: ShowContact">Contact Me</a><br> 
 
    <a data-bind="click: ShowContactSteve">Contact Steve</a><br> 
 
    <a data-bind="click: ShowAboutMe">About Me</a><br> 
 
    <hr> 
 
    <h3> Page content</h3> 
 
    <div data-bind="template: Content"></div> 
 
</div>