淘汰賽，如何通過組件觀察通過

Question

即時通訊可能是新的淘汰賽，並嘗試作爲操場一個單一的頁面應用程序。

對於每個頁面，我註冊了一個組件，並使用數據綁定動態加載組件。 我有我的第二個組件observable，我也想在我的第一個組件中使用。

我的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> 

我的Javascript代碼：

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。怎麼可能顯示'歡迎約翰雪！'在我的默認主頁上。 任何建議如何整個系統可以改變也是受歡迎的，如果它與淘汰賽有關。 如上所述，即時通訊新的這一點，所以我可能採取了一個完全錯誤的方式，我想學習'正確的方式'的用法;-)

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>