2015-05-07 3 views
2

Хорошо встретил!Подмодельные модели в 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.

Спасибо за чтение и, возможно, для ответа/помочь мне получить на моем пути :)

+1

Ваш ProjectViewModel может принимать параметр, например. «parent», и когда вы создаете экземпляр из ApplicationViewModel, вы делаете это с помощью 'self.ProjectViewModel = new ProjectViewModel (this)'. Но было бы лучше, если бы ваш ребенок просмотрел модели, выставляя функции или наблюдаемые данные, которые может использовать родительский вид, поэтому модель просмотра ребенка не должна знать о своем родителе. Это обычно делает код более четким, но ваш вариант использования может отличаться. –

+0

@JanSommer: спасибо за предложение, я его пробовал. Что касается раскрытия функций/наблюдаемых, вот как я обычно это делаю до этого тестового теста. – Nickvda

ответ

0

Ответ обеспечивается @jansommer оказался успешным.

Я изменил следующую строку (добавляемое это в качестве параметра):

self.ProjectViewModel = new ProjectViewModel(this); 

И это было то, что было необходимо.

Спасибо!

Смежные вопросы