Дюрандаль:лучший способ передачи данных между ViewModels

Question

Дюрандаль:Каков правильный способ передачи данных (параметров) между моделями просмотра, если это возможно (без работы с бэкэндом).

скажем, у меня 2 просмотра обзор и подробности я хочу, чтобы пользователь щелкнул элемент списка из обзор он берет идентификатор этого элемента и передает его подробности Viewmodel, чтобы я мог начать работать с этим идентификатором.

Спасибо вам за помощь

Answer 1

Намекать:вам, вероятно, нужен подход, основанный на маршрутах.Другой — для полноты картины.

Подход на основе модели представленияВ целом я бы сказал:создайте модуль, назовем его данными, и внедрите модуль данных в обе модели представления.Затем обзор может установить атрибут clickedElementId в модуле данных, а детали смогут прочитать значение атрибута и использовать его (вы даже можете сделать атрибут наблюдаемым, чтобы детали получали уведомления, когда атрибут изменяется обзором).Этот подход работает, когда обе модели представления могут быть активны одновременно, в то время как мое следующее (предпочтительное) решение работает только в том случае, если вы перенаправляете от одного представления к другому, поэтому они никогда не активны одновременно.Этот подход, основанный на модели представления, я лично использую для общих данных в приложении (вы также можете использовать модель представления оболочки приложения для такого рода атрибутов).

Маршрутный подходСудя по вашему описанию ситуации, это то, что вы хотели бы сделать.Определенные маршруты могут принимать (необязательные) параметры.Предположим, что теперь у вас есть маршрут «details», вы можете изменить его на «details/:id» (принимает параметр id, необязательный) или «details(/:id)» (принимает параметр id, необязательный).

Для щелчка по элементу списка вам понадобится примерно такой обработчик событий:

overview.onElementClick = function (e) {
    var element = this, // The idea is that you need the clicked element for the next line of code
        koDataForElement = ko.dataFor(element);

    router.navigate('details/' + koDataForElement.id);
}

ko.dataFor — хороший помощник для получения данных модели представления, привязанных к элементу, который вы в него передаете, в данном случае к элементу списка.При щелчке вы хотите перейти к деталям и передать идентификатор элемента, по которому щелкнули, в детали.Приведенный выше код делает все это.

Теперь функция активации вашей модели просмотра подробностей должна выглядеть следующим образом:

details.activate = function (id) {
    // id is the parameter we defined for the route. Now you are free to leverage it inside your second view!
};

Редактировать:Дополнительная подсказка:вы также можете запустить маршрут с идентификатором непосредственно по ссылке.Предположим, что весь ваш элемент списка заключен в тег привязки, вы можете сделать что-то вроде этого:

<div data-bind="foreach: myListOfElements">
    <a href="#" data-bind="attr: { href: '#details/' + id }">listElementGoesHere</a>
</div>

Удачи!Если что-то еще неясно, дайте мне знать,