2014-01-09 3 views
4

Durandal: Каков правильный способ передачи данных (параметров) между режимами просмотра (если это возможно) (без обращения к бэкэнд).durandal: лучший способ передать данные между ViewModels

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

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

ответ

8

Подсказка: вы, вероятно, хотите, чтобы подход маршрута инициативе. Другой - ради полноты.

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

Подход, ориентированный на маршрут Кажется, это то, что вы хотели бы сделать, учитывая ваше описание ситуации. Определенные маршруты могут принимать (необязательные) параметры. Предположим, что теперь у вас есть данные маршрута, вы можете изменить его на «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 является хорошим помощником нокаута, чтобы получить данные ViewModel, который привязан к элементу вы передаете в него, в этом случае ваш элемент списка. По щелчку вы хотите перейти к деталям и передать идентификатор элемента clicked для подробностей. Этот выше код делает все это.

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

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

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

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

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

+0

выглядит красиво, я даю ему попробовать и дам вам знать об этом –

+0

Нет У меня нет полного примера наготове. Любые части, в частности, вам нужно, чтобы я объяснил немного более сложную задачу? Полный пример JsFiddle будет затруднен из-за кода настройки Durandal, но я могу собрать более полный HTML и JS для просмотров/режимов просмотра. –

+0

Привет, я только что видел ваш комментарий и вижу, что вы удалили его сейчас. Я все еще был бы счастлив сделать пример, просто дайте мне знать, если вы все еще этого хотите! –

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