Wie kann ich von AJAX geladene Werte an Komponenten übergeben?

Question

Ich übergebe einen Wert als Parameter an eine Komponente. Hier

<badge-button params="badge: oarBadge"></badge-button>

ist das Ansichtsmodell enthält oarBadge:

function AppViewModel() { 

      var self = this; 

      self.oarBadge = ko.observable(); 

      $.getJSON('/guy.json', function(data) { 
       var badge = new Badge('wood oar', data.badges.oar, false); 
       self.oarBadge(badge); 
       // self.oarBadge().has() returns true so the badge is being properly created with data 
       // returned by the ajax call 
      }); 

     } // AppViewModel() 

Hier ist der Badge-Konstruktor:

function Badge(name, has, active) { 
      var self = this; 
      self.name = ko.observable(name); 
      self.has = ko.observable(has); 
      self.active = ko.observable(active); 
      self.disabled = ko.computed(function() { 
       return self.has(); 
      }); 
      self.toggleActive = function() { 
       self.active(!self.active()) 
      }; 
      self.toggleHas = function() { 
       self.has(!self.has()); 
      }; 
     } 

Hier ist die Ansichtsmodell der Komponente:

ko.components.register('badge-button', { 

      viewModel: function(params) { 

       var self = this; 
       self.badge = params.badge(); 

       self.open = function() { 
        self.badge.toggleHas(); 
        self.badge.toggleActive(); 
       } 

      }, 

      template: 
       '<img class="ui image" src="http://fakeimg.pl/300/" data-bind="click: open, css: { disabled: badge.disabled }" >' 

     }); 

Wenn die Seite geladen wird, erhalte ich eine Fehlermeldung, dass das Badge nicht definiert ist.

Voll Beispiel: https://gist.github.com/guyjacks/5a8763ff71f90e3fe8b4b153ed9a5283

Answer 1

Versuchen Sie, eine Standard-Objekteinstellung vor dem Ajax-Aufruf abgeschlossen ist, auch sollten Sie die beobachtbaren zuweisen selbst nicht die Bewertung für die beobachtbaren, so anstatt dies zu tun:

self.badge = params.badge(); 

Sie sollten es tun, wie folgt:

self.badge = params.badge; 

Andernfalls Ihre Variable wird nicht aktualisiert werden, sobald die ajax-Anforderung abgeschlossen ist.

Hier ist ein kleines Beispiel: https://jsfiddle.net/b0bdru1u/1/

Hinweis: Soweit ich den Sperr Bindung wird nicht funktionieren in Bildern