녹아웃, 구성 요소를 통해 관측 가능하게하는 법

Question

메신저 아마도 새로운, 그리고 운동장 단일 페이지 응용 프로그램으로 시도.

각 페이지마다 구성 요소를 등록하고 구성 요소에 데이터 바인딩을 동적으로로드합니다. 나는 내 첫 번째 구성 요소에서 관찰하고 싶은 두 번째 구성 요소를 가지고 있습니다.

내 HTML 코드 :

<!-- Menu --> 
<ul class="menu" data-bind="foreach: pages"> 
    <li data-bind="text: $data, 
        css: { selected: $data === $root.page() }, 
        click: $root.goToPage"></li> 
</ul> 
<!-- Content --> 
<div id="content" data-bind="component: { name: page() + '_content', params: { cont : page() } }"> 
</div> 

내 자바 스크립트 코드 :

function SinglePageViewModel() { 
    var self = this; 

    self.pages = ['Home','Profile','Users']; 
    self.page = ko.observable(); 

    self.goToPage = function (page) { 
     self.page(page); 
    }; 

    self.goToPage(self.pages[0]); 
}; 

ko.components.register('Home_content', { 
    viewModel: function(params) { 
     this.headline = ko.observable(params.cont || ''); 
    }, 
    template: 
    '<h3 data-bind="text: headline"></h3><br>\ 
<span> Welcome <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>!</span>' 
}); 

ko.components.register('Profile_content', { 
    viewModel: function(params) { 
     this.headline = ko.observable(params.cont || ''); 
     this.firstName = ko.observable("John"); 
     this.lastName = ko.observable("Snow"); 
    }, 
    template: 
    '<h3 data-bind="text: headline"></h3><br>\ 
    <input data-bind="value: firstName" />\ 
    <input data-bind="value: lastName" />' 
}); 

ko.components.register('Users_content', { 
    viewModel: function(params) { 
     this.headline = ko.observable(params.cont || ''); 
    }, 
    template: 
    '<h3 data-bind="text: headline"></h3>' 
}); 

ko.applyBindings(new SinglePageViewModel()); 

나는 또한 Fiddle 있습니다. Welcome John Snow!를 어떻게 표시 할 수 있습니까? 내 기본 홈페이지에. 녹아웃과 관련된 경우 전체 시스템을 변경하는 방법에 대한 제안도 환영합니다. 내가 말했듯이 완전히 새로운 방법을 택할 수 있으므로 올바른 사용법을 배우고 싶습니다 .-

Answer 1

전달 된 모델과 값만 업데이트하면됩니다. 페이지 업데이트에서 구성 요소 범위에 값을 저장하는 대신 기본 뷰 모델에서 값을 관찰합니다.

function SinglePageViewModel() { 
 
    var self = this; 
 
    
 
    self.pages = ['Home','Profile','Users']; 
 
    self.page = ko.observable(); 
 
    self.user_firstName=ko.observable("John"); 
 
    self.user_lastName=ko.observable("Snow"); 
 
    
 
    
 
    self.goToPage = function (page) { 
 
     self.page(page); 
 
    }; 
 
    
 
    self.goToPage(self.pages[0]); 
 
}; 
 

 
ko.components.register('Home_content', { 
 
    viewModel: function(params) { 
 
     this.headline = ko.observable(params.cont || ''); 
 
     this.firstName=params.firstName; 
 
     this.lastName=params.lastName; 
 
    }, 
 
    template: 
 
    '<h3 data-bind="text: headline"></h3><br>\ 
 
<span> Welcome <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>!</span>' 
 
}); 
 

 
ko.components.register('Profile_content', { 
 
    viewModel: function(params) { 
 
    \t \t console.log(params); 
 
     this.headline = ko.observable(params.cont || ''); 
 
     this.firstName=params.firstName; 
 
     this.lastName=params.lastName; 
 
    }, 
 
    template: 
 
    '<h3 data-bind="text: headline"></h3><br>\ 
 
    <input data-bind="value: firstName" />\ 
 
    <input data-bind="value: lastName" />' 
 
}); 
 

 
ko.components.register('Users_content', { 
 
    viewModel: function(params) { 
 
     this.headline = ko.observable(params.cont || ''); 
 
    }, 
 
    template: 
 
    '<h3 data-bind="text: headline"></h3>' 
 
}); 
 

 
ko.applyBindings(new SinglePageViewModel());

*{padding:0;margin:0;box-sizing:border-box;} 
 
body{padding:30px;display:flex;color:#888;min-width:500px;font-family:sans-serif;} 
 

 
ul{height:100%;width:25%;border-right:1px solid #CCC;list-style-type:none;} 
 
li{height:35px;line-height:35px;width:100%;padding-left:20px;border-bottom:1px solid #CCC;cursor:pointer;} 
 
li:hover,li.selected{background-color:#EEE;} 
 

 
#content{width:75%;height:100%;text-align:center;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<!-- Menu --> 
 
<ul class="menu" data-bind="foreach: pages"> 
 
    <li data-bind="text: $data, 
 
        css: { selected: $data === $root.page() }, 
 
        click: $root.goToPage"></li> 
 
</ul> 
 
<div id="content" data-bind="component: { name: page() + '_content', params: { cont : page(),firstName:user_firstName,lastName:user_lastName } }"> 
 
</div>

:

내 업데이트 바이올린을 참조하십시오