가장 좋은 방법 - 녹아웃

Question

내가 매핑 플러그인을 사용하고 여기에이 목적을 위해 녹아웃 뷰 모델 에 매핑 내 서버 모델을 얻을 수있는 가장 좋은 방법을 찾고 있어요,

아이디, 제목 사람들은 여기에있는 groupViewModel과 비슷한 것으로 매핑되었습니다. 이 매핑을 항상 새로운 groupViewModel에 정확하게 캐스트하도록하려면 어떻게해야합니까? 여기 실제 문제는 입니다. Id, Title, People은 보기가 아니라 addPerson 방법, 이 해결 방법 또는 정확하고 단순하면서도 정확하게 매핑 할 수있는 가장 좋은 방법을 알려주십시오. 고마워.

여기서 우리의 viewModel에는 그룹 배열이 포함되어 있습니다.이 그룹 배열을 GroupViewModel 항목으로 변환하는 방법은 질문에 대해 이렇게 대답 할 수 있습니다. -

var model = @Html.Raw(Json.Encode(Model)); 

$(function() { 

    var root = this; 
    var viewModel = ko.mapping.fromJS(model, root); 
    // there are Groups as expected but not the addPerson 
    // will cause undefined exception 

    var groupViewModel = function (item) { 
     var self = this; 
     self.Id = ko.observable(item.Id); 
     self.Title = ko.observable(item.Title); 
     self.People = ko.observableArray([]); 
     self.addPerson = function (name) { 
      console.log('addPerson Clicked'); 
     }; // .bind(self) 
    } 
    ko.mapping.fromJS(viewModel); 
    ko.applyBindings(viewModel); 
});  

편집이 대답에 기반 업데이트 :

서버의 ViewModel 클라이언트의

In Server we have this : 

    class ServerVm { 
     public int Id { get; set; } 
     public IList<GroupMap> Groups { get; set; } // groupViewModel 
} 

우리는이 :

var model = @Html.Raw(Json.Encode(Model)); 

$(function() { 

    var root = this; 
    var viewModel = ko.mapping.fromJS(model, root); 

    //viewModel.Groups = ko.observableArray([]); 
    // No need because it's same as server model 

    viewModel.addGroup = function (teamName) { 
      console.log('addGroup Clicked'); 
    }; // .bind(self)  
    // addGroup is fine 
    // it's defined here and working fine, no special mapping needed here 

    // "model" contains something 
    var groupViewModel = function (item) { 
     var self = this; 
     self.Id = ko.observable(item.Id); 
     self.Title = ko.observable(item.Title); 
     self.People = ko.observableArray([]); 
     // self.addPerson - this is hidden in the "model" 
     self.addPerson = function (name) { 
      console.log('addPerson Clicked'); 
     }; // .bind(self) 
    } 
    ko.mapping.fromJS(viewModel); 
    ko.applyBindings(viewModel); 
});  

우리의 문제는 내부에있는 self.addPerson입니다 우리의 중첩 컬렉션 becau 컨테이너 (groupViewModel)가 GroupMap에 자동으로 바인드되지 않습니다. 때마다, 당신은 documentation에서 3 개 매개 변수를 ko.mapping.fromJS 방법의 다른 오버로드를 사용할 수

Answer 1

덕분에 나는 내가 그것을 자신을 확인 원인 캐스팅있어 손으로 groupViewModel을 만들 수 있지만, 이것은 당신을 무엇을, 실제 매핑 솔루션되지 않습니다 :

갱신 대상
... ko.mapping.fromJS 세 번째 매개 변수를 지정

대상을 나타낸다.
ko.mapping.fromJS (data, {}, someObject);

그래서 귀하의 경우에는 다음과 같이 뷰 모델 정의를 업데이트 할 수 있습니다 :

function ViewModel() { 
    var self = this;  
    this.addPerson = function(data) { 
     $.ajax({ 
      url: ...+ self.Id, 
      contentType: 'application/json;charset=utf-8', 
      dataType: 'JSON', 
      type: "POST", 
      success: function (result) // result 
      { 
       console.log('Success'); 
       var avm = new childViewModel(result,self); // another defined vm 
       self.People.push(avm); 
      } 
     }); 
    } 
} 
ViewModel.prototype.init = function(data) { 
    var self = this; 
    ko.mapping.fromJS(data, {}, self); 
} 

을 그리고 그것을 초기화 :

... 
var model = @Html.Raw(Json.Encode(Model)); 
... 
var vm = new ViewModel(); 
vm.init(model); 
ko.applyBindings(vm); 

는 demo 작업을 참조하십시오.

var vm = ko.mapping.fromJS(model); 
vm.addPerson = function(data) { 
... 

다른 demo를 참조하십시오

또 다른 방법은, 조금 짧은, 먼저 모델을지도하고 다음과 같이 여기에 방법을 추가하는 것입니다.

함수가 뷰 모델 내부에 정의되어 나중에 추가되지 않으므로 첫 번째 접근 방식이 더 좋습니다.

업데이트 :

그래서, 의견과 질문을 업데이트 한 후 일부 설명 후, 여기에 수행해야합니다 것입니다 : 당신은 그 아이 객체의 내부 ko.mapping.fromJS 방법을 언급 사용해야한다

1. 은 그것의 매핑 속성을 자동으로.
2. 매핑 객체를 사용하여 mapping 플러그인에 하위 객체 매핑 방법을 알려야합니다.

자식 개체보기 모델 :

function groupViewModel(data) { 
    var self = this; 
    ko.mapping.fromJS(data, {}, self); 
    self.addPerson = function(personData) { 
     // here should be your ajax request, I'll use dummy data again   
    };  
} 

매핑 개체 :

var mapping = { 
    "Groups" : { 
     'create': function(options) { 
      return new groupViewModel(options.data); 
     } 
    } 
}; 

그리고 초기화 : 여기

var vm = ko.mapping.fromJS(model, mapping); 

는 demo 업데이트됩니다.