ko.mapping.toJS 하위 관찰 가능 배열 속성에서 작업하지 않습니다.

Question

observableArray 인 하위 속성 Tags에서 ko.mapping.toJS를 호출하면 결과 JS 객체가 [{}, {}, {} ]; 자식 속성의 속성이 매핑되지 않는 이유에 대한 아이디어가 있습니까?

// Question 
sv.QuestionService = function() { 
    var _saveQuestion = function (question, callback) { 
     var tags = [ 
      { 
       Id: 1, 
       Name: "food" 
      }, 
      { 
       Id: 2, 
       Name: "career" 
      }, 
      { 
       Id: 3, 
       Name: "fax" 
      } 
     ]; 

     $.each(tags, function (index, item) { 
      question.Tags.push({ Id: 1, Name: "food" }); 
     }); 

     console.log(question.Tags()); 

     $.ajax("/Interview/saveQuestion", { 
      data: ko.mapping.toJSON(question), 
      dataType: "json", 
      type: "post", 
      contentType: "application/json", 
      success: callback 
     }); 
    }; 


    return { 
     saveQuestion: _saveQuestion 
    }; 
}(); 

// Question view model 
sv.QuestionViewModel = function (data) { 
    var self = this; 
    if (!data.QuestionType) { 
     data.QuestionType = "Not Specified"; 
    } 
    this.Tags = ko.observableArray([]); 
    ko.mapping.fromJS(data, {}, this); 
    this.QuestionStatus = ko.computed(function() { 
     return this.IsApproved ? "Pending Interview Question" : "Approved Interview Question" 
    }, this); 

    this.TagsText(this.TagsText() || "None"); 
}; 

// C# 
public class InterviewQuestionViewModel { 
    public long Id { get; set; } 
    public string Text { get; set; } 
    public string QuestionType { get; set; } 
    public long? QuestionTypeId { get; set; } 
    public string RequestorName { get; set; } 
    public bool IsAdminApproved { get; set; } 
    public bool IsActive { get; set; } 
    public string TagsText { get; set; } 
    public List<Tag> Tags { get; set; } 

    public InterviewQuestionViewModel() { 
     Tags = new List<Tag>(); 
    } 
} 

public class Tag { 
    [Description("tag_id")] 
    public long Id { get; set; } 

    [Description("tag_name")] 
    public string Name { get; set; } 

    public bool IsActive { get; set; } 

    public Tag() { 
     IsActive = false; 
    } 
} 

// Approved Questions view model 
sv.ApprovedQuestionListViewModel = function() { 
    var self = this; 
    this.questions = ko.observableArray([]); 

    this.questionCount = ko.computed(function() { 
     return this.questions().length; 
    }, this); 

    this.load = function() { 
     sv.QuestionService.getApprovedQuestions(function (data) { 
      var mapped = ko.utils.arrayMap(data, function (item) { 
       return new sv.QuestionViewModel(item); 
      }); 
      self.questions(mapped); 
     }); 
    }.bind(this); 
}; 

Answer 1

QuestionService.saveQuestion 함수의 ko.mapping 코드가 정상적으로 작동합니다. 전체 응용 프로그램을 볼 수 없어서 난이도의 원인을 알 수 없습니다. 그러나 QuestionService.saveQuestion 함수를 사용하면 함수 범위 "tags"변수의 내용을 question.Tags observable 배열로 올바르게 푸시합니다. ko.mapping.toJSON을 호출하면 JSON 형식 문자열이 올바르게 생성됩니다. 와이어를 통과 할 수 있습니다. 여기

내가 당신의 QuestionService.saveQuestion 기능을 행사하기 위해 실행 한 클라이언트 측 코드입니다

<script> 
    sv = {}; 
    sv.QuestionService = function() { 
     var _saveQuestion = function (question, callback) { 
      var tags = [ 
      { Id: 1, Name: "food" }, 
      { Id: 2, Name: "career" }, 
      { Id: 3, Name: "fax" } ]; 
      $.each(tags, function (index, item) { 
       question.Tags.push(item); 
      }); 
      console.log(ko.mapping.toJSON(question)); 

      $.ajax("/Home/saveQuestion", { 
       data: ko.mapping.toJSON(question), 
       dataType: "json", 
       type: "post", 
       contentType: "application/json", 
       success: sv.Completed 
      }); 
     }; 
     return { 
      saveQuestion: _saveQuestion 
     }; 
    }(); 
    sv.Completed = function (data) {  
     alert(data.message); 
    }; 

    var input = { Tags : ko.observableArray([])}; 
    sv.QuestionService.saveQuestion(input, sv.Completed); 
</script> 

이 코드를 실행하면, 나는 제대로 직렬화 된 JSON 문자열의 디버그 창 참조 :

{"Tags":[{"Id":1,"Name":"food"},{"Id":2,"Name":"career"},{"Id":3,"Name":"fax"}]} 

을

그리고 세 멤버가있는 서버 쪽에서 C# Tag 객체의 배열을 볼 수 있습니다.

QuestionService.saveQuestion 함수가 ko.mapping.toJSON을 올바르게 사용하여 ViewModel 부분을 JSON 문자열로 직렬화합니다. 발생한 문제는 코드의 다른 부분에 있어야합니다.