여러보기에 녹아웃 하위보기 모델 바인딩?

Question

나는 녹아웃 JS 바인딩 문제에 갇혀 있어요. 내 단일 페이지 응용 프로그램의 셸 페이지에 바인딩 된 마스터 viewmodel이 있습니다. 이 masterviewmodel은 현재 볼 수있는 뷰를 제어합니다 (Sammy JS 사용). 또한 뷰에 바인딩 된 하위 뷰 모델에 대한 참조를 보유합니다.

var app = function() { 
    var self = this; 

    self.State = ko.observable('home'); 

    self.Home = ko.observable(new homepageVm()); 
    self.User = ko.observable(new userInfoVm()); 
    self.Request = ko.observable(new requestVm()); 
}; 

이용자의 뷰 모델이 맘에 결합하는 하나 개의보기가 있습니다

<div data-bind="with: User, visible: State() === 'user'"> 
    .. snip .. 
</div> 

가진 : 바인딩 적절한 subviewmodel가보기에 바인딩되어 있는지 확인합니다. 이 방법은 홈보기와 사용자 정보보기에서 모두 잘 작동합니다.

requestVm은 마법사 스타일 UI를 사용하며 여러보기에 바인딩해야합니다. 이것은 내가 현재 붙어있는 곳입니다.

<div data-bind="with: Request, visible: State() === 'request-step-1'"> 
    .. snip .. 
</div> 

<div data-bind="with: Request, visible: State() === 'request-step-2'"> 
    .. snip .. 
</div> 

<div data-bind="with: Request, visible: State() === 'request-step-3'"> 
    .. snip .. 
</div> 

바인딩은 내가 사이트를 시작하지 (녹아웃 어떤 바인딩 오류를 던지고되지 않음)하지만 VM을 통해 데이터를 밀어 시작할 때 모든 바인딩이 깨진 것처럼 더 이상, UI를 업데이트 할 때 잘 작동하는 것 (심지어 사용자 VM과 같이 단일 뷰가 바인딩 된 뷰 포함).

마법사의 첫 번째 단계의보기 만 포함하면 3 개가 아닌 요청 VM에 하나의 바인딩 만 남기 때문에 앱의 모든 바인딩이 다시 작동하기 시작합니다.

나는이 원인을 놓치고 있습니다. 녹아웃은 하나의 관찰 요소 만 하나의 단일 요소에 바인딩 할 수 있습니까? 아니면 지원되지 않는 것을 시도하고 있습니까?

업데이트 : 내 VM에서 observableArrays와 함께 진행되는 것으로 보입니다. 간단한 관측에 대한 바인딩은 잘 동작합니다. VM

function userInfoVm() { 
    var self = this; 

    self.UserName = ko.observable(); 

    self.Beun = ko.observable(); 

    self.LoadingUser = ko.observable(false); 
    self.LoadingObjects = ko.observable(false); 

    self.UserData = ko.observableArray([]); 
    self.UserObjects = ko.observableArray([]); 

    self.LoadUser = function (userName) { 

     self.LoadingUser(true); 

     $.get('UserData/UserDetail', { username: userName }, function (details) { 
      self.UserData(details); 
      self.Beun(JSON.stringify(details)); 

      self.LoadingUser(false); 
     }); 
    }; 

    self.LoadObjects = function (userName) { 

     self.LoadingObjects(true); 

     $.get('UserData/UserObjects', { username: userName }, function (objects) { 
      alert(JSON.stringify(objects)); 
      self.UserObjects([objects]); 
      self.LoadingObjects(false); 
     }); 
    }; 

    self.Load = function (userName) { 
     self.UserName(userName); 

     self.UserData(null); 
     self.UserObjects(null); 

     self.LoadUser(userName); 
     self.LoadObjects(userName); 
    }; 
}; 

그리고에서 데이터를 소비하는보기 말했다 : 여기

는 가상 머신 중 하나 인 배열은 데이터에 대한 UI를 notifing되지

<div data-bind="with: User, visible: State() === 'user'"> 
    <h1> 
     <button class="backbutton" onclick="history.back();"> 
     </button> 
     Details for user <span data-bind="text: UserName"></span> 
    </h1> 
    <div class="display detail"> 
     <table> 
      <tbody data-bind="foreach: UserData"> 
       <tr> 
        <td class="property" data-bind="text: Key"> 
        </td> 
        <td class="value" data-bind="text: Value"> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     <div class="loader" data-bind="visible: LoadingUser"> 
      Please wait while we process your request... 
     </div> 
    </div> 
    <div class="display detail"> 
     <h1> 
      Objects and services for user <span data-bind="text: UserName"></span> 
     </h1> 
     <table class="detailtable"> 
      <tbody data-bind="foreach: UserObjects"> 
       <tr> 
        <td class="value"> 
         <a class="service" data-bind="text: Value, attr: { href: '#/service/' + Key }" href="#"> 
         </a> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     <div class="loader" data-bind="visible: LoadingObjects"> 
      Please wait while we process your request... 
     </div> 
    </div> 
    Details for user <span data-bind="text: Beun"></span> 
</div> 

그들에게 먹이를 주었다. AJAX 호출에서 문자열 화 된 데이터가 들어있는 .Beun을 포함하여 다른 관찰 가능 항목은 예상대로 업데이트됩니다.

Answer 1

서버에서받는 콘텐츠는 무엇입니까?

데이터 (문자열)를 eval (객체)가있는 객체로 변환하고이를 수행하려는 경우 foreach 루프 내에서 매핑 플러그인 (knockout.mapping.js)을 사용하여 관찰 가능 어레이로 변환 할 수 있습니다 수동으로.

var data = '[{ "Id": 1, "Titel": "Title1", "Description": "Description 1" }, { "Id": 2, "Titel": "Title 2", "Description": "Description 2" }, { "Id": 3, "Titel": "Title 3", "Description": "Description 3"}]'; 
//fist convert your string to JS-objects using eval() ; then to observableArray using mapping pluging 
self.UserObjects = ko.mapping.fromJS(eval(data));