Динамически генерировать список событий


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

Вопрос в том, что есть в PHP-сгенерированный HTML-сегмент, и есть отдельный сегмент JavaScript, чтобы сделать дополнения (когда кто-то нажимает на кнопку "Добавить новую страницу"). Это не только дублируются; когда это сделано, встроенные в JavaScript крайне мерзкий на вид (посмотрите на длину этой линии!).

Есть ли лучший способ сделать это?

<?php
/** @var $this Zend_View */

$this->headLink()->appendStylesheet($this->baseUrl('css/redmond/jquery-ui-1.8.5.custom.css'));

$this->headScript()->appendFile($this->baseUrl('js/jquery.js'));
$this->headScript()->appendFile($this->baseUrl('js/jquery-ui-1.8.5.custom.min.js'));

$this->headScript()->captureStart(); ?>
//<script language="text/javascript">
    function CreateDateboxes(jqObject) {
        jqObject.datepicker({
            dateFormat: 'yy-mm-dd',
            showOn: 'button',
            changeYear: true,
            changeMonth: true
        });
    }

    function RemoveParent() {
        $(this).parent().parent().remove();
    }

    function AddNewEvent() {
        var today, html, temp, datestring;
        today = new Date();
        datestring = (today.getYear()+1900) + '-' + (today.getMonth()+1) + '-' + today.getDate();
        html = '<li class="ui-content">\n    <div style="float: left; width: 200px;">\n        <span class="ui-icon ui-icon-trash ui-button ui-state-active" style="float: left; margin:3px;"></span>\n        <input name="dates[]" class="datebox" style="width: 120px;" type="text" value="' + datestring + '" />\n    </div>\n    <div style="padding-left: 200px;">\n        <input name="contents[]" type="text" style="width: 100%;" />\n    </div>\n</li>';
        $(this).after(html);
        temp = $(this).next();
        CreateDateboxes($('.datebox', temp));
        $('.ui-icon-trash', temp).click(RemoveParent);
    }

    $(function() {
        CreateDateboxes($('.datebox'));
        $('.ui-icon-trash').click(RemoveParent);
        $('.ui-icon-plus').parent().click(AddNewEvent);
    });
//</script>
<?php $this->headScript()->captureEnd(); ?>
<div class="story">
    <form action="<?= $this->url(array('controller' => 'admin', 'action' => 'applyEvents')) ?>" method="post">
        <ul style="list-style: none; margin-bottom: 1em; padding: 0; width: 100%;">
            <li class="ui-button ui-state-default" style="width: 100%; margin-bottom: 5px;"><span class="ui-icon ui-icon-plus" style="float: left;"></span>
                Add a new Event</li>
            <? foreach ($this->events as $event) { ?>
                <li class="ui-content">
                    <div style="float: left; width: 200px;">
                    <span class="ui-icon ui-icon-trash ui-button ui-state-active" style="float: left; margin:3px;"></span>
                    <input name="dates[]" class="datebox" style="width: 120px;" type="text" value="<?= $event->GetDate()->format('Y-m-d') ?>" />
                    </div>
                    <div style="padding-left: 200px;">
                        <input name="contents[]" type="text" value="<?= $event->GetMessage() ?>" style="width: 100%;" />
                    </div>
                </li>
            <? } ?>
        </ul>
        <input type="submit" name="submit" value="Apply" />
        <input type="submit" name="submit" value="Cancel" />
    </form>
</div>


1302
22
задан 31 января 2011 в 08:01 Источник Поделиться
Комментарии
1 ответ

Я предполагаю, что от этого кода Вы используете Zend фреймворк. Я решал аналогичные проблемы в Zend и Symfony, используя фрагменты РНР.

Вы можете создать частичный _list_item.phtml, который

<li class="ui-content">
<div style="float: left; width: 200px;">
<span class="ui-icon ui-icon-trash ui-button ui-state-active" style="float: left; margin:3px;"></span>
<input name="dates[]" class="datebox" style="width: 120px;" type="text" value="<?php echo $date ?>" />
</div>
<div style="padding-left: 200px;">
<input name="contents[]" type="text" value="<?php echo $message ?>" style="width: 100%;" />
</div>
</li>

Затем на ваш взгляд:

<?php foreach ($this->events as $event): ?>
<?php echo $this->partial('list_item.phtml', array(
'date' => $event->GetDate()->format('Y-m-d'),
'message' => $event->GetMessage(),
)); ?>
<?php endforeach; ?>

Тогда ваш JavaScript:

function AddNewEvent()
{
var today, html, temp;
// call str_replace because javascript doesn't like new lines in strings
html = '<?php echo str_replace(PHP_EOL, "\n", $this->partial('list_item.phtml', array(
'date' => $event->GetDate()->format('Y-m-d'),
'message' => '',
))); ?>';
$(this).after(html);
temp = $(this).next();
CreateDateboxes($('.datebox', temp));
$('.ui-icon-trash', temp).click(RemoveParent);
}

Виола! Никакого дублирования шаблона, потому что уязвимый код находится в частичной. Без лишнего контрактной работе с разными компаниями шаблонов, библиотек, хотя если это такая вещь, которая преобладает в вашем приложении, я предлагаю немного переработать и реализовать шаблонную библиотеку.

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

7
ответ дан 10 февраля 2011 в 01:02 Источник Поделиться