Хорошо встретил!Подмодельные модели в Knockoutjs
Я играю с Knockoutjs с целью иметь единственную ViewModel, которая управляет несколькими моделями sub-view. Это для того, чтобы иметь больший контроль над самими видами и помешать различным частям моего взгляда в их собственное маленькое место. Приведенный ниже код должен объяснить свою мысль:
ApplicationViewModel
ApplicationViewModel = function() {
var self = this;
// Context (for laziness' sake, no separate VM)
self.activeProject = ko.observable();
// States
self.projectsLoaded = ko.observable(false);
// State-change events
// Let application know that loading of projects has been called
self.projectsLoaded.subscribe(function (newValue) {
if (newValue === true) {
console.log('Projects have loaded');
} else {
console.log('Projects have not loaded');
}
});
// Let application know that selection of a project has happened
self.activeProject.subscribe(function (newValue) {
if (newValue != null) {
// Notify other viewmodels that a project has been (successfully loaded)
// Use hook-pattern to hook into this event
} else {
// Notify something went wrong- present user with a notification
// Application stops processes that are project-dependant
}
});
self.ProjectViewModel = new ProjectViewModel();
};
ProjectViewModel
ProjectViewModel = function() {
var self = this;
self.projects = ko.observableArray();
self.loadProjects = function() {
// Business logic to retrieve projects, think AJAX
var placeHolderProjects = [];
// Find projects somewhere and load them up!
// If something went wrong, notify parent
if (placeHolderProjects.length > 0) {
self.projects(placeHolderProjects);
$root.projectsLoaded(true);
} else {
$root.projectsLoaded(false);
}
};
self.selectProject = function (projectId) {
if (!projectId) {
$.parent.activeProject = null;
return;
}
// Fetch data for project, stuff like membershipId
var loadProjectResult = magicalLoadFunction(projectId);
if (loadProjectsResult === true) {
$root.activeProject(projectId);
} else {
$root.activeProject(projectId);
}
// Exit
return;
}
/********** Constructor logic
****************************/
self.loadProjects();
};
Поэтому в основном то, что я ищу, это способ: - родительский контроль/child от их соответствующего ребенка/родителя внутри viewmodels.
Я также изучаю AngularJS, но мне бы очень хотелось, чтобы эта работа в KnockoutJS была первой :) Непосредственная проблема заключается в том, что я не могу заставить $ root/$ parent работать. Я привязываю ApplicationViewModel к обработчику $ (document) .ready(), не уверен, что я должен фактически привязать под-viewmodels к представлению. Я привязал ApplicationViewModel к элементу body.
Спасибо за чтение и, возможно, для ответа/помочь мне получить на моем пути :)
Ваш ProjectViewModel может принимать параметр, например. «parent», и когда вы создаете экземпляр из ApplicationViewModel, вы делаете это с помощью 'self.ProjectViewModel = new ProjectViewModel (this)'. Но было бы лучше, если бы ваш ребенок просмотрел модели, выставляя функции или наблюдаемые данные, которые может использовать родительский вид, поэтому модель просмотра ребенка не должна знать о своем родителе. Это обычно делает код более четким, но ваш вариант использования может отличаться. –
@JanSommer: спасибо за предложение, я его пробовал. Что касается раскрытия функций/наблюдаемых, вот как я обычно это делаю до этого тестового теста. – Nickvda