ASP.Net Web API + KnockoutJs + MVC4 - Verknüpfen Sie es

9

Ich beginne ein neues Projekt und möchte die KnockoutJS + Web Api nutzen, die neu für mich sind. Ich habe ein gutes Verständnis für die Web API, aber Knockout ist im Moment schwer zu verstehen.

Das sind meine ersten Gedanken darüber, wie ich meine App funktionieren lassen möchte:

  • Ich habe einen Standard-MVC-Controller wie LeadsController
  • LeadsController hat eine Action namens ListLeads , dies liefert zwar keine Daten, sondern gibt nur eine Ansicht mit einer Vorlage zurück, um Daten von Knockout anzuzeigen.
  • Die ListLeads -Ansicht ruft meinen api-Controller LeadsApiController über Ajax auf, um eine Liste von Leads zur Anzeige zu erhalten
  • Die Leads-Daten werden dann einem KnockoutJs ViewModel zugeordnet (ich möchte meine Ansichtsmodelle nicht von der Serverseite in JavaScript-Ansichtsmodelle replizieren)
  • Ich möchte so weit wie möglich externe JavaScript-Dateien verwenden, anstatt meine HTML-Seite voller JavaScript aufzublähen.

Ich habe viele Beispiele gesehen, aber die meisten von ihnen geben einige Anfangsdaten beim Laden der ersten Seite zurück, anstatt über einen Ajax-Aufruf.

Meine Frage ist also, wie würde ich mein JavaScript-ViewModel für Knockout erstellen, wenn es von ajax abgerufen wird, wo die Ajax-URL mit Url.Content() erstellt wird.

Was wäre, wenn ich zusätzliche berechnete Werte für dieses ViewModel benötige, wie würde ich das gemappte View-Modell von der Serverseite aus erweitern?

Wenn ich mich nicht gut genug erklärt habe, lassen Sie mich bitte wissen, worüber Sie sich nicht sicher sind, und ich werde versuchen, meine Frage zu aktualisieren, um sie deutlicher zu machen.

    
Paul Hinett 17.08.2012, 00:48
quelle

2 Antworten

4

Ich denke, dein Design ist eine gute Idee. In der Tat entwickle ich gerade eine Anwendung mit genau diesem Design!

Sie müssen die Anfangsdaten nicht in Ihre Seite einbetten. Wenn Ihre Seite geladen wird, erstellen Sie stattdessen ein leeres Ansichtsmodell, rufen Sie ko.applyBindings auf und starten Sie dann einen AJAX-Aufruf, der das Ansichtsmodell nach Abschluss füllt:

%Vor%

Sie sollten eine "Lade" -Nachricht irgendwo auf Ihrer Seite platzieren, bis der AJAX-Anruf abgeschlossen ist.

Um die URL "/ api / Leads" zu generieren, verwenden Sie Url.RouteUrl :

%Vor%

(Dies setzt voraus, dass Ihre API-Route in Global.asax oder App_Start \ RouteConfig.cs als "DefaultApi" konfiguriert wurde.)

Das Knockout-Mapping-Plugin wird oben verwendet, um das AJAX JSON-Ergebnis in ein Knockout-View-Modell zu konvertieren. Standardmäßig verfügt das generierte Ansichtsmodell über eine beobachtbare Eigenschaft für jede Eigenschaft in JSON. Um dies anzupassen, beispielsweise um weitere berechnete Eigenschaften hinzuzufügen, verwenden Sie das "Erstellen" -Rückruf des Knockout-Zuordnungs-Plugins.

Nachdem ich in meiner Anwendung so weit gegangen bin, habe ich festgestellt, dass ich mehr Metadaten aus den serverseitigen Anzeigemodellen für den clientseitigen Code haben möchte, z. B. welche Eigenschaften erforderlich sind und welche Validierungen für jede Eigenschaft gelten. In den Known-Out-Mapping-Callbacks wollte ich diese Informationen verwenden, um automatisch zusätzliche Eigenschaften und berechnete Observables in den View-Modellen zu generieren. Auf der Serverseite nutzte ich einige MVC-Framework-Klassen und Reflektionen, um die Ansichtsmodelle zu untersuchen und einige Metadaten als JavaScript zu generieren, die in die relevanten Ansichten eingebettet werden. Auf der Client-Seite habe ich externe JavaScript-Dateien, die die Knock-Out-Mapping-Callbacks verbinden und View-Modelle entsprechend den auf der Seite bereitgestellten Metadaten generieren. Mein Rat ist, zunächst die Anpassungen des Knockout-View-Modells und anderes JavaScript manuell in jeder Ansicht zu schreiben und dann generische JavaScript-Funktionen bei der Umgestaltung in externe Dateien zu verschieben. Jede Ansicht sollte nur das minimale JavaScript enthalten, das für diese Ansicht spezifisch ist. An diesem Punkt können Sie in Erwägung ziehen, C # zu schreiben, um das JavaScript aus Ihren serverseitigen Modellanmerkungen zu generieren.

    
Joe Daley 17.08.2012, 12:09
quelle
1

Für das URL-Problem fügen Sie dieses in Ihrem _Layout.cshtml an einer Stelle hinzu, an der es vor den Dateien liegt, die es verwenden:

%Vor%

Dann können Sie mit dem window._appRootUrl URLs mit String-Verkettung oder mit Hilfe einer Javascript-Bibliothek wie URI.js erstellen.

Wie für die zusätzlichen berechneten Werte möchten Sie möglicherweise eine knockout-berechnete Observable verwenden. Wenn das nicht möglich ist oder Sie es in .Net vorziehen, sollten Sie in der Lage sein, eine Eigenschaft nur mit einem Getter zu erstellen, aber dies wird nicht aktualisiert, wenn Sie andere Eigenschaften auf dem Client aktualisieren, wenn sie davon abhängen.

    
kendaleiv 17.08.2012 02:43
quelle