Wählen Sie Optionen erhalten über Ajax und Unmap-Problem

Question

Ich sehe keine Beispiele, die ein Formular mit Auswahlelementen mit Optionen über Ajax erhalten verknüpfen. Ich möchte eine Ansichtsmodelleigenschaft über Ajax initialisieren, um einige Auswahllisten in meiner Ansicht zu füllen und die ausgewählte ID aus meinen Modelldaten zu verknüpfen. Ich brauche diese Arrays nicht, wenn ich ein .unmap() kompiliertes Ansichtsmodell durchführe, weil ich die großen Listen beim Aktualisieren des Modells nicht an den Server zurücksenden möchte. Also, sagen wir, ich habe Daten mit ProjectID, ProjectDescription, ProjectTypeID, ProjectPriorityID. In meinem View-Modell muss ich über Ajax eine Liste von ProjectTypes und ProjectPriorities erhalten und sie in meiner Ansicht verwenden, damit ich den Wert aus einer Liste auswählen kann. Ich bin nicht sicher, wie dies erreicht werden soll, ohne die Listen als Teil der Daten zu erhalten, wenn .unmap() ausgeführt wird, um es zurück an den Server zu senden.

Wenn in meinem Ansichtsmodell eine Eigenschaft für "ProjectTypes" oder "ProjectPriorites" vorhanden ist, werden diese beim Aufruf von .unmap() immer Teil der Daten.

Vielen Dank

Answer 1

Es gibt verschiedene alternative Ansätze. Eine besteht darin, ein einzelnes Modell zu haben, das sowohl 'sekundäre Daten' - wie alle ProjectTypes - enthält, die sich nicht dynamisch ändern, als auch die 'primären Daten', die basierend auf Benutzereingaben aktualisiert werden können. Wenn Sie JSON-Daten mit unmap() aus der VM-Hierarchie zurückerhalten, können Sie sie "zurückschneiden" und nur die relevanten "primären" Teile zurück auf den Server senden.

Ein weiterer Ansatz ist die Primär- und Sekundärdaten getrennt zu halten - so ist das Modell nur die ‚primären‘ Daten und die Sekundärdaten getrennt sind - zum Beispiel, als Helfer übergeben:

// Instantiate View Models 
var appVm = $.views.viewModels.MyModel.map(modelData); 
var typesVm = $.views.viewModels.MyTypes.map(typeData); 

$.templates("#appTemplate").link("#page", appVm, {types: typesVm});

<select data-link="typeId()">< 
    {^{for ~types.projectTypes()}} 
    <option value="{{:id()}}">{{:label()}}</option> 
    {{/for}} 
</select> 

Sie auch nicht anzeigen Modelle für die Sekundärdaten kompilieren können wählen, wenn es im Grunde ‚statisch‘ ist, und zwar:

$.templates("#appTemplate").link("#page", appVm, {types: typesData});

<select data-link="typeId()">< 
    {^{for ~types.projectTypes}} 
    <option value="{{:id}}">{{:label}}</option> 
    {{/for}} 
</select> 

Ein weiterer Ansatz ist nur irgendwelche Datenwerte oder Array zurück an den Server zu senden, die tatsächlich geändert haben, zum Beispiel durch einen CRUD/REST Web-Service-Ansatz-Server aktualisiert werden. In diesem Fall benötigen Sie einen Code, der die Daten diffundiert, oder Sie verwenden observe oder observeAll, um auf inkrementelle Änderungen zu reagieren ...