Ответ 1
Есть несколько направлений, которые вы могли бы пойти с этим.
Один из вариантов заключается в вызове ko.applyBindings с различными моделями просмотров против отдельных элементов DOM, таких как:
var viewModelA = { name: "Bob" };
var viewModelB = { price: 50 };
ko.applyBindings(viewModelA, document.getElementById("aContainer"));
ko.applyBindings(viewModelB, document.getElementById("bContainer"));
В этом случае вы должны убедиться, что элементы не являются предками друг друга (не нужно связывать что-то дважды)
Другой вариант - использовать модели подзаголовков:
var subModelA = { name: "Bob" };
var subModelB = { price: 50 };
var viewModel = {
subModelA: { name: "Bob" },
subModelB: { price: 50 }
};
ko.applyBindings(viewModel);
В этом методе вы использовали бы привязки with в областях, которые вы хотите отобразить, с каждой моделью просмотра. Вы можете контролировать видимость с флагами на подмодели или в верхней модели.
Другим вариантом, который мне нравится, является дать вашему "взгляду" немного структуру и сделать что-то вроде:
var View = function(title, templateName, data) {
this.title = title;
this.templateName = templateName;
this.data = data;
};
var subModelA = {
items: ko.observableArray([
{ id: 1, name: "one" },
{ id: 2, name: "two" },
{ id: 3, name: "three" }
])
};
var subModelB = {
firstName: ko.observable("Bob"),
lastName: ko.observable("Smith")
};
var viewModel = {
views: ko.observableArray([
new View("one", "oneTmpl", subModelA),
new View("two", "twoTmpl", subModelB)
]),
selectedView: ko.observable()
};
ko.applyBindings(viewModel);