Использование KnockoutJS с несколькими страницами

Question

Я только начинаю с изучения KnockoutJS. Одна вещь, которую я смущает, образцы, казалось, все были сосредоточены на одном представлении с одной моделью просмотра. Как все работает с большим приложением?

Я собираюсь написать чистое приложение html/jquery. Все данные передаются как json через ajax. В верхней части приложения есть общий заголовок навигации с несколькими вкладками и субтитрами, реализованными с помощью Twitter Bootstrap.

Если я создаю каждую страницу приложения как отдельный вид html и js viewmodel, как мне поддерживать единый заголовок? Если это были веб-формы asp.net на стороне сервера, я бы использовал для этого мастер-страницы. Но это все клиентская сторона.

Есть ли что-то в нокаут, которое обрабатывает это? Или, возможно, другая библиотека, которая решает эту проблему?

Я полагаю, что я мог бы написать приложение на одной большой странице html, но оно было бы довольно большим. Там должен быть лучший путь.

Answer 1

Вы можете определить отдельные модели. В методе ko.applyBindings первым параметром является viewmodel, но вторым необязательным параметром является элемент dom для привязки этой модели представления.

Я внимательно не смотрел на Twitter Bootstrap, но я установка jsfiddle, который должен вас покинуть на правой ноге: http://jsfiddle.net/JasonMore/ygT6v/10/

Посмотреть

<ul id="menu" data-bind="foreach:options"> 
    <li data-bind="text:option"></li> 
</ul> 
<br/> 
<section id="person"> 
    <p>Hey, <span data-bind="text:fullName"></span>, what are you doing?</p> 
    <p><label>First: <input type="text" data-bind="value:firstName" /></label></p> 
    <p><label>Last: <input type="text" data-bind="value:lastName" /></label></p> 
</section > 
<br /> 
<section id="address"> 
    <p>You live at: <span data-bind="text:fullAddress "></span></p> 
</section > 

Javascript

// main.js 
var menuViewModel = { 
    options: ko.observableArray([ 
     { option: 'person'}, 
     { option: 'address'} 
    ]) 
}; 

ko.applyBindings(
    menuViewModel, 
    document.getElementById('menu') 
); 

// person.js 
var personViewModel = new function() { 
    var self = this; 
    this.firstName = ko.observable('John'); 
    this.lastName = ko.observable('Doe'); 
    this.fullName = ko.computed(function() { 
     return self.firstName() + ' ' + self.lastName(); 
    }); 
};  

ko.applyBindings(
    personViewModel, 
    document.getElementById('person') 
); 

// address.js 
var addressViewModel = new function() { 
    var self = this; 
    this.address = ko.observable('123 main'); 
    this.city = ko.observable('Smallville'); 
    this.state = ko.observable('TX'); 
    this.zip = ko.observable('12345'); 
    this.fullAddress = ko.computed(function() { 
     return self.address() + ' ' + self.city() + ' ' + self.state() + ' ' + self.zip(); 
    }); 
}; 

ko.applyBindings(
    addressViewModel, 
    document.getElementById('address') 
); 
​ 

Answer 2

Вы говорите, что содержимое каждой вкладки является «одной страницей»?

Если это так, вы можете просто использовать частичные файлы, чтобы вытащить данные с помощью jQuery.load(). Тогда каждая страница будет иметь свою собственную модель, и заголовок не будет затронут, не так ли? Думаю, это нужно будет уточнить.