нокаут, как пройти наблюдаемый через компоненты

Question

им, вероятно, новичок в нокауте, и попробовал в качестве игровой площадки одностраничное приложение.

Для каждой страницы я зарегистрировал компонент и im динамически загружал компонент с привязкой к данным. У меня есть мой второй компонент, который я хочу использовать в моем первом компоненте.

Мой 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. Как можно показать «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>