Wie bekomme ich diese einfache One-Way-Bindung mit Knockout zur Arbeit?

Ich lerne Knockout und dies ist mein erstes Beispiel dafür, also sei bitte sanft.Wie bekomme ich diese einfache One-Way-Bindung mit Knockout zur Arbeit?

Ich möchte nur eine unidirektionale Bindung vom Modell zu den Textfeldern, d. H. Was auch immer im Modell ist, muss in den Textfeldern angezeigt werden. Ich möchte noch keine Observablen erstellen. Hier

ist, was ich habe, aber wenn ich diesen Code ausführen, die Textfelder enthalten nicht die Modellwerte, und die Konsole meldet einen Fehler:

TypeError: c is null

Hier ist mein Code:

1.html

<html> 
    <head> 
     <meta charset="utf-8"/> 
     <script type='text/javascript' src='knockout-3.4.0.js'></script> 
     <script type='text/javascript' src='1.js'></script> 
    </head> 

    <form id = "frm" name = "frm"> 
     <fieldset> 
      <legend>Your friend's basic information</legend> 

      <div> 
       <label for = "FirstName">First Name</label> 
       <input type = "text" name = "FirstName" id = "txtFirstName" data-bind = "value: friend.firstName" /> 
      </div> 

      <div> 
       <label for = "LastName">Last Name</label> 
       <input type = "text" name = "LastName" id = "txtLastName" data-bind = "value: friend.lastName" /> 
      </div> 
     </fieldset> 

    </form> 
</html>

1.js

var model = 
{ 
    friend : 
    { 
     firstName : 'Sathyaish', 
     lastName : 'Chakravarthy' 
    } 
}; 

ko.applyBindings(model);

Es sieht aus wie knockout ist nicht in der Lage, eine verschachtelte Eigenschaft zu binden. Da die Eigenschaft, an die ich bin, nicht direkt ein Mitglied des Objekts model ist, sondern stattdessen in model.friend verschachtelt ist, kann sie nicht gebunden werden.

Sicher kann es nicht sein, dass ich kein hierarchisches Modell haben kann und dass ich nur binden kann, wenn die Eigenschaften Top-Level-Mitglieder des model Objekts sind?

Ich mache wahrscheinlich etwas falsch mit der Syntax.

Quelle

2016-10-29 Water Cooler v2

Wenn Sie rootElement nicht bestehen, um Bindungen anzuwenden, wird window.document.body verwendet. Wenn Sie jedoch das Skript in den Abschnitt head laden, ist die body in diesem Moment nicht verfügbar. So müssen Sie Ihre 1.js Laden im Inneren des Körpers so bewegen:

<html> 
    <head> 
     <meta charset="utf-8"/> 
     <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js'></script> 

    </head> 

    <body> 
    <form id = "frm" name = "frm"> 
     <fieldset> 
      <legend>Your friend's basic information</legend> 

      <div> 
       <label for = "FirstName">First Name</label> 
       <input type = "text" name = "FirstName" id = "txtFirstName" data-bind = "value: friend.firstName" /> 
      </div> 

      <div> 
       <label for = "LastName">Last Name</label> 
       <input type = "text" name = "LastName" id = "txtLastName" data-bind = "value: friend.lastName" /> 
      </div> 
     </fieldset> 

    </form> 
    <script type='text/javascript' src='1.js'></script> 
    </body> 
</html>

Quelle

2016-10-29 13:47:53

Vielen Dank. 4 Minuten vor dem grünen Checkie. :-) –

@ WaterCoolerv2, gern geschehen. Sollte es jetzt akzeptieren können) –

Sie müssen Mapping-Bibliothek verwenden, das zu tun. Wenn Sie verschachtelte Eigenschaften wie eine Klasse verwenden, müssen Sie die Zuordnung verwenden. überprüfen Sie es heraus: Plugin Knockout Mapping

Ihr Code etwas wie das sein wil:

var viewModel = function() { 
var _vm = null, 

init = function() { 

    _vm = { 
     friend : ko.mapping.fromJS({ 
     firstName : 'Sathyaish', 
     lastName : 'Chakravarthy' 
     }), 
     change: function(){ 
     _vm.friend.firstName('first name changed'); 
     } 
    }; 

    ko.applyBindings(_vm, $('#frm').get(0)); 
} 

return { 
    init: init 
}

}();

Ich habe dieses Szenario die ganze Zeit. Ich legte JSFIDDLE check it out

Quelle

2016-10-29 13:55:34

Es funktioniert ganz gut ohne dieses Plug-in für mich. Ich hoffe, dass ein seriöser Rahmen von Modellhierarchien nicht in Frage gestellt wird. –

Ich denke, Sie können einen Punkt haben. Ich habe eine Straßensperre in dieser Frage (http://stackoverflow.com/q/40325541/303685), die eine Zuordnung erfordern kann, aber ich bin mir nicht sicher. –

Hallo! Versuchen Sie, das Mapping-Plugin wie gesagt zu verwenden und versuchen Sie, die Eigenschaften zu ändern. Es muss in parentes sein: Eigenschaft ("Wert") –

Wie bekomme ich diese einfache One-Way-Bindung mit Knockout zur Arbeit?

Antwort

Verwandte Themen