Dojo Tabs - Population w/HTML/JS & Anchor links

Question

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

Мое приложение имеет одну главную страницу, которая включает контейнер табуляции с несколькими панелями контента, а затем вставлен как дети. Я полагал, что при каждой области содержимого загружать внешний HTML-файл и загружать его таким образом было хорошим решением - он, казалось, обеспечивал модульный дизайн и позволял легко изменять содержимое отдельной вкладки. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что, хотя все загружается правильно, я не могу обеспечить привязку ссылок внутри вкладки или между вкладками. Вот некоторые примеры кода:

var tabs = new TabContainer({ 
    style: "height: 100%; width: 100%;" 
}, "tab-container"); 
tabs.startup(); 
var metadata = new ContentPane({ 
    title: "Metadata", 
    id: "Metadata" 
}); 
/* repeat for the non-metadata content panes */ 
request.get("/js/viewer/templates/splash.html").then(function (results) { 
    splash.set("content", results); 
}); 
/* repeat for each pane */ 

Для моей страницы метаданных Я хочу, чтобы он содержал информацию о наборах данных я предлагаю пользователям. В идеале, он должен иметь оглавление с привязкой к соответствующим записям. Однако, когда я реализовать ссылку якорь, например так:

<a href="#test">Click me to jump down the page!</a> 
<!-- some content here --> 
<div id="test">We made it!</div> 

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

Вот простой Imgur альбом, показывающий, что происходит: http://imgur.com/a/JCnlH

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

Итак, это был длинный вопрос, но вот суть этого:

Что я делаю неправильно анкерными ссылки?

Answer 1

В моем случае, это поведение, кажется, вызвано взаимодействием overflow: hidden CSS свойство тела моего сайта, взаимодействующего с height: 100% собственности моего контейнер табуляции. Я не знал, что свойство overflow: hidden было установлено, потому что оно было частью структуры, которую я использовал. Изменив свойство переполнения, я смог добиться желаемого поведения.

Answer 2

Чтобы ответить на ваш первый вопрос:

Вы должны поставить все JavaScript внутри главной страницы, а не внутри партиалы. Это не считается лучшей практикой с JavaScript, потому что это означает, что вам нужно будет eval() контента, и обычно, когда вы начинаете делать это, когда вам это не нужно, вы делаете что-то неправильно.

В этом случае вы можете легко добавить код JavaScript на главную страницу. Если вам нужно подождать, пока откроется или загрузится конкретная вкладка, вы можете использовать события onShow или onLoad на виджетах dijit/layout/ContentPane.

---

Кроме того, когда вы используете ContentPane вы должны использовать правильные сеттеры для добавления контента/HTML к нему.

Вместо того, чтобы делать:

request.get("/js/viewer/templates/splash.html").then(function (results) { 
    dojo.byId("Splash").innerHTML = results; 
}); 

Вы должны делать:

request.get("/js/viewer/templates/splash.html").then(function (results) { 
    splash.set("content", results); 
}); 

Или, если у вас нет ссылки больше переменной splash, вы должны использовать registry.byId("splash").set("content", results).

---

Об гиперссылке, я понятия не имею. Я не получаю такого же поведения, так что вы могли бы объяснить об этом немного дальше?

Вот (насколько я могу судить) рабочий пример: http://jsfiddle.net/n4515tsz/