2015-12-20 2 views
0

В моей навигационной панели я вызываю find() в сборнике, чтобы перечислить все доступные документы.Метеор: отображение конкретной информации документа

документ может выглядеть примерно так:

{id: 1, title: title, info: "info about this doc"} 

Рядом с навигационной панели у меня есть основное содержание области.

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

Мой вопрос: как вы указываете область информации, на которую был нажат документ, так что он знает какую информацию показывать?

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

Session.set("curTitle", id); 

, а затем при отображении информации, я мог бы просто использовать Session.get(), чтобы получить идентификатор документа, мне нужно чтобы показать

Правильно ли вы справляетесь с этим типом ситуации с помощью Meteor? Или есть лучший способ достичь этого?

ответ

1

Я настоятельно рекомендую вам использовать iron:router

В случае, если вы хотите знать, как это сделать, вот полный пример:

//router.js on the client folder 
Router.configure({ 
    //your main layout template 
    layoutTemplate:'yourTemplateName' 
}); 

Мы создаем маршрут, который загружает основное содержание когда вы нажимаете заголовок

Router.route('/pathyouwant/:_id', function() { 
    //we specify what we want to render and where which is also connected to our html 
    this.render('yourTemplateWithMainData', { 
     data: function() { 
      return CollectionName.findOne({_id: this.params._id}); 
     }, 
     //this is connected to your html. see the next code. 
     to: 'load-it-here' 
    }) 
},{ 
    name: 'pathName' //we name the path to use it inside the links 
}); 


<template name="yourTemplateName"> 
    //not going to add all the html elements but only important parts 
    //lets say this is how you show only titles: 
    {{#each somethings}} 
     {{title}} 
    {{/each}} 


    <div class="some-div"> 
     //we specify where the content will load in our html here. 
     {{> yield 'load-it-here'}} 
    </div> 
</template> 

Вам просто нужно добавить тег вокруг названия сейчас. Мы уже назвали наш путь в router.js как PathName в нашем маршрутизаторе

<a href="{{pathFor route='pathName'}}">{{title}}</a> 

EDIT: Поэтому я написал пример маршрутизации с {{> выход "Specific-место}}, что вы можете использовать их в любом шаблоне. Например:

<template name="mainTemplate"> 
    {{>yield}} 
</template> 

Ваш маршрут для дома:

Router.route('/', function() { 
    this.render('home'); //every route without a specified 'to:' will load to {{> yield}} automatically 
}); 

Итак, когда вы идете в '/' он делает домашний шаблон на {{> выход}}. Допустим, вы не хотите, чтобы загрузить содержимое в {{> выход}}, но вы хотите, чтобы загрузить его в шаблон дома, который вы уже оказанной {{> выход}}

<template name="home"> 
    //other elements, nav bar etc. 
    <div class="left-panel"> 
     {{#each somethings}} 
      <a href="{{pathFor route='pathName'}}">{{title}}</a> 
     {{/each}} 
    </div> 

    <div class="content-area"> 
     {{> yield 'load-it-here'}} 
    </div> 

</template> 

Позвольте мне знать, если вы что-то не понимаете. Приветствия.

+0

В чем причина предпочтения железного маршрутизатора за сеансы? – Simon

+0

@Simon Вам понадобится маршрутизация в каждом проекте +, это поможет вам создавать более быстрые и безопасные приложения, если вы будете учиться и использовать их правильно. Вы также можете использовать прядильщики по маршруту и ​​заставлять его вращаться, пока ваши данные не загрузятся и т. Д. ... – Luna

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