durandal:melhor maneira de passar dados entre ViewModels

Question

Durandal:Qual a forma correta de passar dados (parâmetros) entre Viewmodels se possível (sem lidar com o backend).

digamos que eu tenha 2 visualizações visão geral e detalhes eu quero que o usuário clique em um elemento da lista de visão geral ele pega o id desse elemento e passa para detalhes Viewmodel para que eu possa começar a trabalhar com esse id.

Obrigado pela ajuda

Answer 1

Dica:você provavelmente deseja a abordagem orientada por rota.O outro é por uma questão de completude.

Abordagem baseada em ViewmodelEm geral eu diria:crie um módulo, vamos chamá-lo de dados e injete o módulo de dados em ambos os modelos de visualização.A visão geral pode então definir o atributo clickedElementId no módulo de dados, e os detalhes podem ler o valor do atributo e usá-lo (você pode até tornar o atributo observável para que os detalhes sejam notificados quando o atributo for alterado pela visão geral).Essa abordagem funciona quando ambos os modelos de visualização podem estar ativos ao mesmo tempo, enquanto minha próxima solução (preferencial) só funciona se você rotear de uma visualização para outra, para que eles nunca estejam ativos ao mesmo tempo.Essa abordagem 'orientada pelo viewmodel' é algo que eu pessoalmente uso para dados comuns no aplicativo (você também pode usar o viewmodel do shell do aplicativo para esses tipos de atributos).

Abordagem orientada por rotaParece ser o que você gostaria de fazer, dada a descrição da situação.As rotas definidas podem receber parâmetros (opcionais).Suponha que agora você tenha 'detalhes' da rota, você pode alterá-la para 'details/:id' (aceita um parâmetro id, não opcional) ou 'details(/:id)' (aceita um parâmetro id, opcional).

Você precisa de um manipulador de eventos parecido com este para clicar em um elemento da lista:

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 é um ótimo auxiliar para obter os dados do modelo de visualização vinculados ao elemento que você passa para ele, neste caso, o elemento da lista.Ao clicar, você deseja navegar até os detalhes e passar o id do elemento clicado para os detalhes.O código acima faz tudo isso.

Agora a função de ativação do seu viewmodel de detalhes deve ficar assim:

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

Editar:Dica adicional:você também pode acionar a rota com id diretamente de um link.Suponha que todo o seu elemento da lista esteja envolvido em uma tag âncora, você poderia fazer algo assim:

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

Boa sorte!Se ainda não estiver claro, me avise,