2015-01-30 2 views
0

녹아웃 매핑 플러그인을 사용하여 Ajax 호출에서 반환 된 데이터를 Durandal 프레임 워크의 viewmodel에 매핑 할 계획입니다. 그러나 뷰에서 사용할 수 있도록 매핑 된 객체를 반환하는 방법을 알지 못했습니다. 여기 내 코드는 뷰 모델의 login.js을 위해 : 당신이 볼 수 있듯이 ko.mapping가 나는보기로 돌아가 loginInterfaceData에 할당에서, 객체가 반환Durandal Viewmodel에서 녹아웃 매핑 객체가 반환되지 않음

define(function (require) { 
    var system = require('durandal/system'), 
      app = require('durandal/app'), 
      ko = require('knockout'), 
      komapping = require('komapping'), 
      deferred = $.Deferred(), 
      loginOptionsUrl = '/json/loginOptions.json', 
      loginInterfaceData = {}; 

ko.mapping = komapping; 

return { 

activate: function(){ 
    var request = $.getJSON(loginOptionsUrl) 
      .done(function(data){ 
      loginInterfaceData = ko.mapping.fromJS(data); 
      system.log(loginInterfaceData); //Do a check here; loginInterfaceData contains all the right data 
      deferred.resolve(); 
      }); 
    return deferred.promise(); 
}, 
loginInterfaceData: loginInterfaceData; //However, the view gets an empty object 

. 그러나 Web Inspector에서 'viewmodels/login'에 의해 반환 된 loginInterfaceData 객체를 검사하면 빈 객체입니다. 내가 추측 할 수있는 유일한 이유는 viewmodel이 매핑이 완료되기 전에 loginInterfaceData를 반환한다는 것입니다. 그러나, 나는 그런 일이 일어나지 않도록 어떻게해야할지 모르겠습니다.

어떤 아이디어/조언이 가장 감사하겠습니다. 미리 감사드립니다!

답변

0

loginInterfaceData에 대한 참조를 반환하지만 activate 함수에서 해당 변수를 다시 할당하므로 이전에 반환 된 loginInterfaceData은 항상 빈 개체가됩니다. activate 완료 후

... 
getLoginInterfaceData: function() { 
    return loginInterfaceData; 
} 
... 

그리고 당신의 호출 코드에

, 단지 getLoginInterfaceData() 전화 : 당신이 할 수있는 것은이 같은 loginInterfaceData 당신에 대한 getter 함수를 반환합니다.

0

function foo() { 
 
    var bar = {}; 
 
    return { 
 
     setBar : function(x) { 
 
      bar = x; 
 
     }, 
 
     bar: bar, 
 
     getBar: function() { 
 
      return bar; 
 
     } 
 
    } 
 
} 
 

 
var f = foo(); 
 
f.setBar(5); 
 
console.log(f.bar); // logs empty object 
 
console.log(f.getBar()); // logs value of inner foo.bar
은 분명히 문제가의 activate 함수가 호출 전에 loginInterfaceData 객체 를 반환 원래 빈 개체를받을 수있는 뷰의 원인에있다 :
다음은 간단한 예입니다. 내 솔루션은 먼저 loginInterfaceData을 빈 데이터에 바인드 한 다음 Ajax를 통해 데이터를 수신하면 업데이트합니다. 이 같은 :

(...)  

ko.mapping = komapping; 
loginInterfaceData = ko.mapping.fromJS({}); //instead of assigning loginInterfaceData = {}, I use KO Mapping with an ampty JSON object 

(...) 

return { 

activate: function(){ 
      return $.ajax({ 
       url: loginOptionsUrl, 
       contentType: 'application/json', 
      }).done(function(data) { 
       ko.mapping.fromJS(data, loginInterfaceData);//so here, instead of mapping for the first time, I remap/update it 
      }); 

}, 
loginInterfaceData: loginInterfaceData; //at this point, loginInterfaceData is still empty object but will be updated/remap once ajax call is successful 

호프 이것은 내가했던 것처럼 똑같은 문제에 부딪히는 사람을 돕는다. 건배.