Привет всем, я работал над набором шаблонов Razor, которые можно редактировать с помощью диспетчера опыта и в то же время полностью реагировать на несколько значений ширины экрана с помощью начальной загрузки Twitter. В результате мне нужно динамически управлять выводом DOM в зависимости от того, что редактор Experience Manager добавляет или удаляет, но при этом поддерживать адаптивный дизайн. Частично эта конструкция придерживается правил, которые диктует бутстрап для твиттера.
Загрузочная программа twitter обеспечивает превосходный адаптивный дизайн, вводя динамически вычисляемую ширину div с использованием классов. Например, <div class="span12> использует всю ширину оболочки. «Span6» эффективно использует половину, с вычисленным определенным запасом, чтобы учесть другой div с «span6». Однако это работает только в том случае, если предыдущий класс называется <div class="row-fluid">, и до тех пор, пока span<numbers> фактически составляет ровно 12. Проблема возникает, когда мне нужно закрыть <div class="row-fluid">, когда это число действительно достигнуто.
Чтобы уточнить: он должен выводить вот так
<div class="row-fluid">
<div class="span6">..code</div>
<div class="span4">..code</div>
<div class="span2">..code</div>
</div>
<div class="span[#]"> отображаются с помощью шаблона компонента, чтобы учесть несколько компонентов в <div class="row-fluid>, который отображает шаблон страницы.
Однако с уровня шаблона компонента я не могу получить фактическое количество компонентов этого шаблона, фактически существующих на самой странице. Я рассчитываю ширину используемого компонента на основе варианта схемы самого компонента. Я использую следующий код шаблона компонента для его правильной визуализации:
@{
var spanClass = String.Empty;
if (Fields.HasField("component_width") && Fields.component_width != null) {
if (Fields.component_width.ToLower() == "full") {
spanClass = "span12";
} else if (Fields.component_width.ToLower() == "half") {
spanClass = "span6";
} else if (Fields.component_width == "40%") {
spanClass = "span5";
} else if (Fields.component_width == "35%") {
spanClass = "span4";
} else if (Fields.component_width == "25%") {
spanClass = "span3";
}
}
}
<div class="@spanClass">...code
Чтобы перейти к моему вопросу: мне нужно иметь возможность закрыть <row-fluid> div, если было достигнуто число 12. Поэтому, если выбран один компонент с параметрами «Полный» (ширина), должен появиться следующий выходной код:
<div class="row-fluid">
<div class="span12">..code</div>
</div>
Если на странице есть два компонента с выбранной опцией "половина", это должно позволять
<div class="row-fluid">
<div class="span6">..code</div>
<div class="span6">..code</div>
</div>
обратите внимание на закрывающий div в конце. Есть ли способ получить доступ к переменной, которую я создал в шаблоне компонентов var spanClass = String.Empty; из шаблона страницы? Что-то вроде:
@foreach (var cp in GetComponentPresentationsByTemplate("XM_Generic Content")) {
@if (cp.Component.spanClass == "span6") {
<div class="row-fluid">
@cp.RenderComponentPresentation()
@if (cp.Index == 1) {
</div>
}
}
}
Я все еще знакомлюсь с шаблонами Razor, практическими аспектами адаптивного дизайна и, конечно же, со StackOverflow. Скорее всего, я что-то полностью пропустил, сделал глупые ошибки в своем коде или просто задал глупый вопрос. Обязательно дайте мне знать.
