3

大家好，我一直在研究一组 Razor 模板，这些模板既可以使用 Experience Manager 进行站点编辑，又可以使用 Twitter 引导程序完全响应多个屏幕宽度。因此，我需要根据 Experience Manager 编辑器添加或删除的内容动态操作 DOM 输出，但仍保持响应式设计。这种结构的一部分是遵守 twitter bootstrap 规定的规则。

twitter 引导程序通过使用类引入动态计算的 div 宽度来实现出色的响应式设计。例如， A<div class="span12>使用包装器的整个宽度。“span6”有效地使用了一半，并计算了一定的边距以允许另一个具有“span6”的 div。但是，这仅在调用前面的类时才有效<div class="row-fluid">，并且只要跨度<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>回答我的问题：如果达到数字 12，我需要能够关闭div。因此，如果选择了一个带有“Full”（宽度）选项的组件，则需要出现以下输出代码：

<div class="row-fluid">
    <div class="span12">..code</div>
</div>

如果页面上有两个组件选择了“half”选项，则必须允许

<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。很有可能我完全错过了一些东西，在我的代码中犯了愚蠢的错误，只是问了一个愚蠢的问题。无论如何，让我知道。

4

3 回答 3

6

该包不在模板运行时之间共享，因此这种行为是正常的（无法从不同的实例看到在一个模板中设置的变量）。

有一些方法可以解决这个问题，但您应该考虑一下，也许 Tridion 选择隔离模板执行是有充分理由的。

请参阅此处了解解决此问题的方法之一。

于 2012-12-07T13:34:09.857 回答
3

使用 ContextVariables 字典的标准技术不允许您在 CT 中设置某些内容并从 PT 访问它。实际上，每次渲染组件时，渲染上下文都会从页面渲染上下文中获取变量的新副本。回信给他们，因此无效。有一种技术可以解决这个问题，在 tridion-practice 上有详细描述。如前所述，诉诸这些技术不应该是您的第一选择，但有时您需要这样做。

于 2012-12-07T18:55:53.233 回答
2

目前，用户似乎正在定义组件字段中的宽度位置。我认为，它很典型，但是如果您创建 5 个将调用相同 Razor TBB 的组件模板，并在组件模板上定义一个参数模式，可以在其中设置组件的宽度，那么之后您可以轻松地在页面模板。

于 2012-12-07T11:29:42.723 回答