녹아웃 mvc에서 관찰 가능한 배열에 새 객체 추가

Question

knockout 매핑을 사용하여 서버 측 객체를 JSON에 매핑하는 데 도움이됩니다. 내가 그것을 재현하고 자바 스크립트에서 수동으로 각 조각을 매핑하지 않으려면 싶지 않아 수많은 컬렉션과 개체가 있습니다. 그래서, 나는 이것을 위해 knockout-mapping을 사용하고 있습니다.

C#을 모델 :

public class Vaccinations 
{ 
    public string Vaccination { get; set; } 
    public System.DateTime VaccinationDate { get; set; } 
} 

public class Dog 
{ 
    public string Name { get; set; } 
    public int Age { get; set; } 

    public Dog() 
    { 
     this.Vaccinations = new System.Collections.Generic.List<Vaccinations>(); 
    } 

    public System.Collections.Generic.List<Vacinations> Vacinations { get; set; } 
} 

당신으로

가 나는 문제가 있었다, 그래서 나는 간단한 예제를 사용하기로 결정했습니다, 그래서 여기에 내가 ASP.NET MVC 응용 프로그램이 무엇입니까 볼 수 있습니다, 각각의 개들은 예방 접종 목록을 가지고있을 수도 있고 그렇지 않을 수도 있습니다. 나는 내 컨트롤러에서

생성하고 미리 채워진 개 개체 반환 : 내보기 (Index.cshtml)에서

 public ActionResult Load() 
    { 
     Dog rambo = new Dog 
     { 
      Name = "Rambo", 
      Age = 5 
     }; 

     rambo.Vacinations = new System.Collections.Generic.List<Vacinations> { 
      new Vacinations { Vacination = "Rabies", VacinationDate = DateTime.Now.AddYears(-1) }, 
      new Vacinations { Vacination = "Mumps", VacinationDate = DateTime.Now.AddYears(-2) } 
     }; 

     return Json(rambo, JsonRequestBehavior.AllowGet); 
    } 

을, 나는 그것이 예방 접종의의 개 및 목록을 표시하도록 설정 . 사용자가 백신 추가 단추를 클릭하여 컬렉션에 새 줄을 추가하고 데이터를 입력 할 수있게하려고합니다.

다시 말해서 knockout.mapping을 사용하여 매핑을 수행합니다.

var ViewModel = function (data) { 
    var self = this; 
    ko.mapping.fromJS(data, {}, self); 

    self.isValid = ko.computed(function() { 
     return self.Name().length > 3; 
    }); 

    // Operations 
    self.save = function() { 
     $.ajax({ 
      url: "Dog/Save", 
      type: "post", 
      contentType: "application/json", 
      data: ko.mapping.toJSON(self), 
      success: function (response) { 
       alert(response.Status); 
      } 
     }); 
    }; 

    self.addVaccination = function() { 
     self.Vaccinations.push(new self.Vaccination()); // <--- This doesn't work and I know why, so how do I do this? 
    } 
}; 

$(function() { 
    $.getJSON("Dog/Load", null, function (data) { 
     ko.applyBindings(new ViewModel(data)); 
    }); 
}); 

내 질문에 내가 뷰 모델 객체에 추가 한 "addVaccination"기능 중심으로 돌아 가지 : 자바 스크립트 섹션에서, 이것은 내가 가지고있는 것입니다. Javascript에서 "코드"하지 않고 새로운 "예방 접종"객체를 어떻게 지정합니까? 그게 내가 할 필요가 없도록 녹아웃 매핑을 사용하는 전체 이유였습니다. 그러나 나는 그 주위에 다른 길은 보이지 않는다.

Vaccinations observable 어레이에서 기본 Vaccination 개체에 액세스하여 새로운 개체를 만들 수 있습니까?

그런 다음 마지막 질문은 어떻게 이것을 내 컨트롤러로 다시 전달할 것입니까? 이것이 효과가 있을지 모르겠다.

Answer 1

직접하실 수 없습니다. 그러나 서버 측에서 Vaccination 인스턴스를 정의하고이를 기본 인스턴스로 반환 할 수 있습니다.

따라서 이전 데이터와 기본 인스턴스를 반환해야합니다.

public ActionResult Load() 
{ 
    ... 
    var data = new { 
     defaultVacination = new Vacination(), 
     rambo = rambo, 
    }; 
    return Json(data , JsonRequestBehavior.AllowGet); 
} 

그리고 클라이언트 측에서는 동일한 데이터와 기본 인스턴스를받습니다.

var ViewModel = function (data) { 
    var self = this;  
    ko.mapping.fromJS(data.rambo, {}, self); 
    var defaultInstance = data.defaultVacination;   
    ...  
    self.addVaccination = function() { 
     // clone the default instance. 
     self.Vaccinations.push(ko.utils.extend({}, defaultInstance)); 

} 

도움이되기를 바랍니다.