매핑 플러그 인을 사용할 때 Knockout.js 관측 가능한 배열이 서버에서 업데이트되지 않음

Question

Knockout.js와 매핑 플러그인에 약간의 문제가 있습니다. 기본적으로 데이터없이 시작하고 페이지로드시 정보로드를위한 Ajax 요청을 작성합니다. Ajax 요청이 의도 한대로 작동하고 있다는 것을 알고 있습니다. 반환되는 데이터를 콘솔에 기록하고 있습니다.

var projectId = @Model.Project.Id; 
    var stories; 
    viewModel = ko.mapping.fromJS(stories);  

    $.ajax({ 
     type: "GET", 
     url: "/Projects/JsonDetails", 
     data: {id: projectId}, 
     success: function (data) { 
      stories = data.stories; 
      ko.mapping.fromJS(stories, viewModel); 
      console.log(stories); 
     } 
    }); 

콘솔이 데이터를 올바르게 로깅합니다. 그래서 Ajax 요청이 제대로 작동하고 있다는 것을 알고 있습니다.

리터

보기 마크 업 :

<section id="project-stories" data-bind="foreach: stories"> 

      <div class="project-story-container drop-shadow"> 

       <div class="story-summary"> 
        Story Summary 
       </div> 
       <div class="story" data-bind="attr:{'data-id': Id}"> 
        As a <span class="actor" data-bind="text: Actor"> </span> I want to <span class="objective" data-bind="text: Objective"> </span>, so that <span class="justification" data-bind="text: Justification"></span>. 
       </div> 
       <div class="story-controls"> 
        <a href="#">Edit</a> 
       </div> 
      </div> 
     </section> 

난 호출 시도했다 :

var projectId = @Model.Project.Id; 
    var stories; 
    viewModel = ko.mapping.fromJS(stories); 
    ko.applyBindings(viewModel); 

    $.ajax({ 
     type: "GET", 
     url: "/Projects/JsonDetails", 
     data: {id: projectId}, 
     success: function (data) { 
      stories = data.stories; 
      ko.mapping.fromJS(stories, viewModel); 
      console.log(stories); 
     } 
    }); 

그러나 그것은 단지 더 악화 원인 KO는 바인딩이없는 것을 불평한다 설정.

내가 뭘 잘못하고 있는지 알 수 있습니까? 결국에는 뷰 모델에 더 많은 이벤트가 연결되도록하고 싶습니다. 또 다른 도전이 될 것입니다. 하지만 지금은 Ajax 요청이 완료되면 바인딩을 제대로 업데이트 할 수 없습니다.

여기 자습서를가는 : http://knockoutjs.com/documentation/plugins-mapping.html

-------------------- UPDATE를 ------------- -------------

나는이 StackExhange 포스트 참조하여 내 자신의 질문에 대답 할 수 있었다 : Knockout JS mapping plugin confusion

var projectId = @Model.Project.Id; 
    var viewModel ={}; 
    $.ajax({ 
     type: "GET", 
     url: "/Projects/JsonDetails", 
     data: {id: projectId}, 
     success: function (data) { 
      viewModel.stories = ko.mapping.fromJS(data.stories); 
      ko.applyBindings(viewModel); 
     } 
    }); 

문제는 내가이 필요했다

을 빈 뷰 모델 이 일을하기 위해서.

Answer 1

매핑하는 방식에 문제가 있습니다. data.stories을 매핑하면 안되지만 data 그 자체 ko.mapping.fromJS(data, viewModel); 그런 식으로 맵핑을하면 템플릿에 사용할 수있는 스토리에 대해 관찰 가능한 배열이 만들어집니다.

data에 매핑하지 않으려는 다른 요소가 포함되어있는 경우이를 무시 배열에 추가하여 스토리 만 매핑 할 수 있습니다.

한 가지 더 - 데이터가없는 상태에서 시작하는 경우 녹아웃이 해당 속성이 없을 때보기 모델에 stories을 매핑하려고하므로 페이지로드시이 오류가 발생합니다. 관측 가능한 배열로 stories을 포함하기 위해 미리 뷰 모델을 정의하십시오.

Answer 2

@Marek Karbarz 안녕하세요, 저는 전체 viewModel을 전달해야한다고 생각하지 않습니다. 예를 들어 페이지의 모델이있는 경우 모델에는 SearchCriteria 개체와 Results 개체가 있습니다. 검색 만하면되는 경우 결과 개체를 전달하려는 이유가 무엇입니까?

-edward