bei Verwendung von Knockout Observablen in Modulen geladen mit Requierejs kann ich den Wert nicht aktualisieren

Ich bin neu in Knockout und ich habe Probleme mit Observablen in Modulen mit Requirejs geladen.bei Verwendung von Knockout Observablen in Modulen geladen mit Requierejs kann ich den Wert nicht aktualisieren

Der Code ist sehr einfach und es funktionierte mit einem Viewmodel im HTML deklariert. Wenn ich das Viewmodel mit require lade, verhalten sich die Observables-Variablen wie eine Funktion, also muss ich Klammern verwenden, um auf die Variable zuzugreifen. Aber wenn ich versuche, den Wert über eine Eingabe zu ändern, passiert nichts. Auch wenn ich dem Observable-Array Werte aus einer Callback-Funktion hinzufüge, wird die Benutzeroberfläche nicht aktualisiert.

Es gibt eine Möglichkeit, das Modul zu laden und die Variablen ohne Klammern zu verwenden.

Ich versuchte, eine Konstruktorfunktion und eine gemeinsame Objektinstanz zu verwenden, aber das Problem bleibt.

index.html

<div data-bind="component: 'cmp'"></div> 
<script> 
    (document).ready(function() { 
     ko.components.register('cmp', {require: '../Models/cmp'}); 
     ko.applyBindings(); 
    }); 
<script>

/Models/cmp.js

define(['knockout-3.4.0'], function (ko) { 
function MyComponentViewModel(params) { 
    self = this;   
    self.firstName = ko.observable("John"); 
    self.lastName = ko.observable("Doe"); 
    self.sel = ko.observableArray(['France', 'Germany', 'Spain']);  
} 
return { 
    viewModel: MyComponentViewModel, 
    template: { require: 'text!../Models/cmp.html' }     
}; 

});

/Models/cmp.html

<p>First name: <strong data-bind="text: firstName">todo</strong></p> 
<p>Last name: <strong data-bind="text: lastName()">todo</strong></p> 
<select data-bind="options: sel()" class="form-control" id="sel"></select> 
<p>First name: <input data-bind="value: firstName" /></p> 
<p>Last name: <input data-bind="value: lastName()" /></p>

resullt:

Vorname: Funktion c() {if (0 ....

Nachname: Doe

Quelle

2016-05-11 andrezp

Ich vermute, Sie require.js und knockout.js in der Datei index.html geladen werden. ko wird in Ihrer index.html verwendet, muss also im globalen Gültigkeitsbereich sein. Wenn dies der Fall ist, würde Knockout zweimal geladen und könnte ähnliche Probleme verursachen, was Sie beschreiben.

Wie auch immer, ich würde einen require Eingangspunkt in Ihrer index.html Datei verwenden und Ko als Abhängigkeit injizieren.

<html> 
<head> 
<title>test</title> 
</head> 
<body> 
<script src="require.js"></script> 
<div data-bind="component: 'cmp'"></div> 
<script> 
    require(["knockout-3.4.0"], function(ko) { 
     ko.components.register('cmp', {require: 'Models/cmp'}); 
     ko.applyBindings(); 
    }); 
</script> 
</body> 
</html>

cmp.js

define(['knockout-3.4.0'], function (ko) { 
    function MyComponentViewModel(params) { 
     self = this;   
     self.firstName = ko.observable("John"); 
     self.lastName = ko.observable("Doe"); 
     self.sel = ko.observableArray(['France', 'Germany', 'Spain']);  
    } 
    return { 
     viewModel: MyComponentViewModel, 
     template: { require: 'text!Models/cmp.html' }     
    }; 
});

cmp.html

<p>First name: <strong data-bind="text: firstName">todo</strong></p> 
<p>Last name: <strong data-bind="text: lastName">todo</strong></p> 
<select data-bind="options: sel()" class="form-control" id="sel"></select> 
<p>First name: <input data-bind="value: firstName" /></p> 
<p>Last name: <input data-bind="value: lastName" /></p>

An der Wurzel des Projekts (für die HTML-Datei, um die Pfadänderung beachten), ich habe index.html, knockout-3.4.0.js, require.js und text.js. Ich habe cmp.js und cmp.html in einem Unterordner "Models" (rootDir \ Models) aufgenommen.

Eine letzte Anmerkung, wenn Sie stark knockout.js verwenden, kann es einfacher sein, knockout.js im globalen Bereich (Skript-Tag) zu laden und nicht als Abhängigkeit in jedem Javascript-Modul zu verwenden.

Quelle

2016-05-12 02:00:55 mcdermott7run

In der Tat wurde ich Knockout zweimal geladen und das verursachte das Problem. Um meinen Code zu vereinfachen, lasse ich wichtige Informationen (die Deklaration der Skripte) weg, das werde ich beim nächsten Mal beachten. Ich benutze knockout.js stark, also werde ich Ihrem Rat folgen und ihn in den globalen Rahmen laden. – andrezp

bei Verwendung von Knockout Observablen in Modulen geladen mit Requierejs kann ich den Wert nicht aktualisieren

Antwort

Verwandte Themen