コンポーネントにajaxによってロードされた値を渡すにはどうすればよいですか？

Question

コンポーネントにパラメータとして値を渡しています。ここで

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

oarBadgeを含むViewModelにある：ここでは

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() 

は、バッジのコンストラクタである：ここで

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()); 
      }; 
     } 

は、コンポーネントのViewModelにある：

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 }" >' 

     }); 

ページが読み込まれると、バッジが定義されていないというエラーが表示されます。

全例：https://gist.github.com/guyjacks/5a8763ff71f90e3fe8b4b153ed9a5283

Answer 1

AJAX呼び出しが完了する前にも、あなたは、観察のための評価自体観察できないを割り当てる必要がありますので、代わりにこれを行うのは、デフォルトのオブジェクトを設定してみてください：

self.badge = params.badge(); 

AJAXリクエストが完了するとそうでない場合は、あなたの変数は更新されません

self.badge = params.badge; 

：

あなたはこのようにそれを行う必要があります。 https://jsfiddle.net/b0bdru1u/1/

注：ここでは

は小さな例である私は