App Архитектура с Дюрандала

Question

У меня есть приложение, построенное с DurandalJS следующим:

1. index.html: По умолчанию базовой страницы
2. Shell.js: The оболочки - содержит меню
3. intro.js: viewmodel визуализируется внутри оболочки, если пользователь не аутентифицирован
4. home.js: viewmodel отображается внутри оболочки, если пользователь аутентифицирован

Код аутентификации вызывается из shell.js.

Мне нужна моя оболочка, чтобы иметь возможность контролировать некоторые свойства в файлах intro.js и home.js. В частности - если пользователь выбирает элемент с флажком в одном из этих представлений, мне нужно, чтобы shell.js изменил пункты меню. В идеале это можно сделать, разрешив оболочке «наблюдать» вещи в моделях viewmodels. Это возможно?

Answer 1

У меня было то же самое проблемное время назад. Я использовал события Durandal для реализации взаимосвязи между оболочкой и другими представлениями.

Вы можете найти информацию о событиях Дюрандальте в следующей ссылке: http://durandaljs.com/documentation/Events/

Я guive вам пример, потому что документация не очень понятная.

Чтобы бросить событие в Дюрандала вы должны использовать модуль приложения:

app.trigger("someEvent"); 

Чтобы поймать это событие, вы должны сделать это:

app.on("someEvent", function() { 
    //Do that you want 
}); 

Кроме того, этот Comunication может быть реализован хранение информации в локальном хранилище или что-то в этом роде, но я думаю, что использование событий более ясное.

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

Answer 2

Я закончил с использованием паб/к югу отсюда: knockmeout.net/2012/05/using-ko-native-pubsub.html

Моя скрипка: http://jsfiddle.net/PTSkR/38/

/* Pub/sub code */ 
var postbox = new ko.subscribable(); 

ko.subscribable.fn.publishOn = function(topic) { 
    this.subscribe(function(newValue) { 
     postbox.notifySubscribers(newValue, topic); 
    }); 

    return this; //support chaining 
}; 

ko.subscribable.fn.subscribeTo = function(topic) { 
    postbox.subscribe(this, null, topic); 

    return this; //support chaining 
}; 

/* Selection code */ 
this.selectedItems = ko.observableArray().subscribeTo("TOPIC"); 

var viewModel = { 
    documents: [{"documentId": "1"}, {"documentId": "2"}, {"documentId": "3"}], 
    selectedDocumentIds: ko.observableArray() 
}; 

viewModel.documentIndex = {}; 
ko.utils.arrayForEach(viewModel.documents, function(doc) { 
    viewModel.documentIndex[doc.documentId] = doc; 
}); 

this.selectedDocuments = ko.computed(function() { 
    return ko.utils.arrayMap(viewModel.selectedDocumentIds(), function(id) { 
     return viewModel.documentIndex[id]; 
    }); 
}).publishOn("TOPIC"); 

ko.applyBindings(viewModel);