Knockout JS Mapping Plugin ohne Anfangsdaten / leeres Formular

Wir sind mit Knock-out-und die knockout-mapping-plugin zu erleichtern databinding in unserem jQTouch web-Anwendung. Der Grund, warum wir mit der mapping-plugin ist in der Lage sein zu verwenden, knockout, ohne die Notwendigkeit zu definieren/ändern viewmodels manuell in javascript. Die mapping-plugin funktioniert hervorragend, wenn Sie ein initial load der Daten aus der server - /client-Seite Datenbank.

Das problem das wir haben ist, dass wir einige Ansichten, die eine form, in der es möglich ist, dass nicht alle ursprünglichen Daten. Ohne die ersten Daten, die mapping-plugin kann nicht 'erzeugen' die viewmodel - (ko.mapping.fromJS). Dies bedeutet, dass müssen wir noch definieren unsere viewmodels von hand für große Teile unserer Ansichten.

Bin ich falsch in der Annahme, dass dies ein Szenario, welches die mapping-plugin (sollte) unterstützen? Ich meine, dies bedeutet, dass die mapping-plugin kann nur in Szenarien, in denen Sie immer einen initial load der Daten.

InformationsquelleAutor der Frage MichaelvR | 2011-07-18

  1. 19

    Ein paar Möglichkeiten für Sie, außer eben manuell die Verwaltung Ihrer view-Modell. Die mapping-plugin unterstützt eine create Rückruf, können Sie anpassen, wie wird es erstellt. Diese können verwendet werden, um Standard-Eigenschaften zu einem Objekt, wenn Sie geschehen, zu fehlen.

    Etwas wie dieses: http://jsfiddle.net/rniemeyer/WQGVC/

    Andere alternative ist die Verwendung einer Bindung, schafft Eigenschaften, die fehlen. Es könnte so Aussehen:

    //create an observable if it does not exist and populate it with the input's value
ko.bindingHandlers.valueWithInit = {
    init: function(element, valueAccessor, allBindingsAccessor, data) {
        var property = valueAccessor(),
            value = element.value;

        //create the observable, if it doesn't exist 
        if (!ko.isWriteableObservable(data[property])) {
            data[property] = ko.observable();
        }

        //populate the observable with the element's value (could be optional)
        data[property](value);

        ko.applyBindingsToNode(element, { value: data[property] });
    }
}

    Verwenden Sie es wie folgt aus (übergeben müssen der Eigenschaft als string, sonst wird es Fehler):

    <input data-bind="valueWithInit: 'name'" />

    Beispiel hier: http://jsfiddle.net/rniemeyer/JPYLp/

    InformationsquelleAutor der Antwort RP Niemeyer

  2. 4

    Ich denke, die Lösung für Ihr problem kommt vom denken über die view-Modell-in die falsche Richtung. Ein view-Modell ist nicht nur etwas, liefert Daten, um die Aussicht, sondern auch ein Platz-Halter für die übermittlung der Daten zurück.

    Den Weg, den ich in der Regel am Ende der Arbeit mit ko, die ich nie senden Sie eine leere Ansicht Modell zur Ansicht. Die view-Modell-in der Regel hat allen Feldern, ich bin die Bindung auf. Während Sie möglicherweise leere Zeichenfolgen oder Objekte initialisiert mit keine Werte anzeigen, die die tatsächlichen Objekte zu noch beendet, mit einer richtigen Darstellung der einzelnen Objekte zu den Feldern, ich bin die Bindung an.

    Vielleicht möchten Sie sich einfach in das senden leerer Objekte anstelle von nichts, um die Ansicht.

    EDIT: Das Beispiel ist un-ASP.NET MVC

    So basiclaly ich auf der server-Seite die ich erstelle eine view-model-Objekt, das alle Daten enthält, die dargestellt werden muss sowie alle Daten, die gesammelt werden müssen. Für eine einfachere Validierung code, den ich in der Regel setzen die Daten in seine eigene Unterklasse, sondern dass alles eine Frage der Bedürfnisse Ihres Codes.

    In anycase, das jedes Objekt gehen, um die Ansicht inherts von einem vmBase-Klasse, die im Grunde bietet eine toJSON () - Methode die Generierung der JSON-Serialisierung des Objekts. Diese wird aufgerufen, aus meiner Sicht, die von der view-engine. Wie im code gezeigt unten. 

          <script type='text/javascript'>         
        var viewModel = ko.mapping.fromJS(<%= Model.ToJson() %>);                     

        $(document).ready( function () {        
            ko.applyBindings(viewModel);                             
        });                  
     </script>

    Wenn ich bereit bin, zu senden den code zurück, bis ich entfernen Sie einfach ziehen eine JS-version des view-Modell. 

    <script type='text/javascript'>
     var dataToSendToServer = ko.toJS(viewModel);
</script>

    In einigen sanarios, wo nur ein Teil der view-Modell verändert (dies ist, wenn Sie tun, AJAX-updates), können Sie einige Coole Sachen wie, Schalt-Vorlagen, so dass unterschiedliche Bindung kann uses. In diesem Fall sind wir mit einem #ID_of_Container als container der ursprünglichen Daten/Vorlage und ersetzen Sie die Vorlage (die enthalten kann, die data-bind="" - Elemente) eine neue Vorlage ID_of_Template 

    <script type='text/javascript'>
    ko.cleanNode($("#ID_of_Container"));
    delete (viewModel.Some_Element_To_Be_Updated);
    viewModel = ko.mapping.updateFromJS(viewModel, New_Data_For_That_Element);

    //Use ko.toJS(viewModel) because standard template plugin doesn't understand 
    //knockout observables
    $("#ID_of_Container").html($("#ID_of_Template").tmpl(ko.toJS(viewModel)))
    ko.applyBindings(viewModel, $("#ID_of_Container")[0]);

</script>

    InformationsquelleAutor der Antwort Sergei Golos

  3. 0

    Ein Ansatz, den ich Erforsche nun ist die Erstellung einer weiteren web-service-Methode aufgerufen ReturnEmptyObject() macht nichts anderes, als das erstellen und liefern eine neu instanziierte Objekt (dessen Eigenschaften wäre default-Werte) auf der server-Seite. Die (in meinem Fall C#) - Objekt bekommt zu JSON serialisiert, und kommt endlich auf die jQuery-Ajax-Aufruf.... und dann ging Sie in ko.mapping.updateFromJS()... die schafft die benötigten observablen auf die erste Seite zu laden... bevor ich rufe ko.applyBindings().

    Beim ko.applyBindings() ausführt, findet die observablen, die es braucht, damit es nicht zu werfen ist ein Fehler, auch wenn Sie meistens leer.

    Diese Weise kann die Seite zuerst geöffnet werden, ohne die Felder ausgefüllt. Doch, wenn ich, fügen Sie einige neue Eigenschaften, die in meine Klasse auf der server-Seite, Sie erscheinen automatisch auf der client-Seite immer noch.

    InformationsquelleAutor der Antwort ClearCloud8

Schreibe einen Kommentar