将自定义装饰器添加到表单元素后,侧栏丢失

时间:2010-07-30 16:54:22

标签: javascript zend-framework markdown

侧栏位于layout.phtml文件中。我很困惑为什么在我的表单中添加1个装饰器,导致我的侧边栏...嗯其实是它后面的所有东西section#main - 我正在使用HTML5 - 丢失

layout.phtml

... /* scripts and all */ ...
<body>
    <header> ... </header>
    <nav> ... </nav>
    <div class="clear" />

    <section id="main">
        <?php echo $this->navigation()->breadcrumbs(); ?>
        <?php echo $this->layout()->content; ?>
    </section>

    <aside id="sidebar"> ... </aside>
    <footer> ... </footer>
</body>

section#main之后的所有内容都丢失了。

我的自定义装饰器只是

class Application_Form_Decorator_WmdPreview extends Zend_Form_Decorator_Abstract {
    function render($content) {
        $separator = $this->getSeparator();
        $html = '<label style="margin-top: 10px">Preview</label><div class="wmd-preview" />';

        switch ($this->_placement) {
            case self::APPEND:
                return $content . $separator . $html;
            case self::PREPEND:
                return $html . $separator . $content;
        }
    }
}

和我的表单init() -

... // adding form elements 

// call loading of default decorators manually
$this->loadDefaultDecorators();
// override decorator for body
$this->getElement('body')
     ->setDecorators(array(
        'ViewHelper',
        'Errors',
        array('Description', array('tag' => 'p', 'escape' => false)),
        'Label',
        new Application_Form_Decorator_WmdPreview,
        array('HtmlTag', array('tag' => 'p'))
     ));
// disable autoloading of default decorators 
$this->setDisableLoadDefaultDecorators(true);

......嗯...我现在注意到的是来自查看源的html是好的

<p><label for="body" class="optional">Post body</label>
<textarea name="body" id="body" rows="24" cols="80"></textarea>
<label style="margin-top: 10px">Preview</label><div class="wmd-preview" /></p>

但是萤火虫的输出不是......

...
<textarea name="body" id="body" rows="24" cols="80"></textarea>
<label style="margin-top: 10px">Preview</label>
</p> <!-- why is this here !!! -->
<div class="wmd-preview">...</div><!-- and this out of the p!!! -->
</form>
</section>
<!-- all my content supposed to be here is missing! -->
</body>

javascript问题?来自WMD

解决方案

而不是使用<div />使用<div></div>。也像@DavidW说的那样,我在<div>内没有<p>

1 个答案:

答案 0 :(得分:2)

我认为<p>代码只能包含phrasing content。特别是,<div>中的<p>会导致HTML无效。 Firefox / Firebug可能会尽其所能,但最终会窒息。也许使用<span>而不是div可以解决问题。