Inline edit – predvyplneny form v snippete, alebo jeditable? Better practice

Zdravim, opat riesim dylemu sposobenu hlavne mojim lack of experience :) Snazim sa vytvorit nieco na sposob „natural language form“. Formular pre pridavanie v podstate vyzera rovnako ako vypis polozky ktora sa tym formularom pridava, pricom uzivatel ktory danu polozku pridal, bude mat pri jej prehliadani rovno moznost ju aj menit…

Ale riesim co najlepsi sposob ako to spravit. V podstate mam funkcne dve varianty:

1. Danu polozku vypisem klasicky, bez nejakeho formulara a jednotlive riadky editujem pomocou ‚jquery.jedit‘ pluginu. Riesenie v podstate jednoduche, skratene:

<?php
{snippet task}
	<h2 class="title editable" data-handle="{link //jedit!}" id="title">{$task->title|capitalize}</h2>
{/snippet}

// Presenter
	public function createComponentSingleTaskForm()
	{

		$task = $this->tasksService->getTask($this->getParameter('id'));

		$singleTaskForm = new Form();

		$singleTaskForm->setTranslator($this->translator);

		$singleTaskForm->addText('title', 'addTask.form.title')
			->setAttribute('placeholder', 'addTask.form.title')
			->addrule(Form::FILLED, 'addTask.form.title_missing')
			->setDefaultValue($task->title);
		// ... //
		return $singleTaskForm;
	}

	public function handleJedit($Id, $Value)
	{
		$this->edit = TRUE;
		$this->template->edit = $this->edit;

		$task = $this->tasksService->getTask($this->getParameter('id'));
		$this->tasksService->update($task, array($Id => $Value));
		// $stop();
		$this->template->task = $task;
		$this->validateControl();
		$this->invalidateControl('task');
	}
?>

<script>
	$.nette.ext('jeditable', {
		load: function () {
			$('.editable').editable(function(value, settings) {
				var element = $(this);
				$.nette.ajax({
					url: element.data('handle'),
					data: {
						Id: element.attr('id'),
						Value: value
					}
				});
				return value;
			}, {
				style  	: "inherit"
			});
		}
	});
</script>

Co je problem, ze prichadzam o validaciu vstupov, ktoru uz som mal raz vyriesenu, pri tom originalnom pridavani danej polozky klasickym formularom.

Preto som skusil sposob 2, ktory v podstate funguje tiez. Vlastne pridanu polozku klasicky zobrazujem vo formulari, pricom ak moze polozku uzivatel editovat, v sablone zmenim variable $edit na TRUE a invalidujem snippet, pricom vykreslene elementy sa prekreslia na input formy z formularu. Skratene:

<?php
	{snippet task}
		{form singleTaskForm, class => 'ajax'}
			{if $edit}
				{input submit, class=>'btn btn-xs btn-success'}
				{input cancel, class=>'btn btn-xs btn-danger'}
			{else}
				{if $userId == $task->users_id}
					<a n:href="edit!, 'edit'=>$task->id" class="btn btn-xs btn-danger ajax">Edit</a>
				{/if}
			{/if}

			{if $edit}
				{input title, class=>'title'}
			{else}
				<h2 class="title">{$task->title|capitalize}</h2>
    			{/if}
		{/form}
	{/snippet}


// Presenter:
	public function createComponentSingleTaskForm()
	{
		$task = $this->tasksService->getTask($this->getParameter('id'));

		$singleTaskForm = new Form();

		$singleTaskForm->setTranslator($this->translator);

		$singleTaskForm->addText('title', 'addTask.form.title')
			->setAttribute('placeholder', 'addTask.form.title')
			->addrule(Form::FILLED, 'addTask.form.title_missing')
			->setDefaultValue($task->title);

		return $singleTaskForm;
	}

	public function singleTaskFormSubmitted(Form $singleTaskForm)
	{
		$values = $singleTaskForm->getValues();

		if ($singleTaskForm['submit']->isSubmittedBy()) {
			$task = $this->tasksService->getTask($this->getParameter('id'));
			$this->tasksService->update($task, array('title' => $values->title));
			// $stop();
			$this->template->task = $task;
		}
		if ($singleTaskForm['cancel']->isSubmittedBy()) {
			$this->redirect('this');
		}

		$this->edit = FALSE;
		$this->template->edit = $this->edit;

		if ($this->isAjax()) {
			$this->invalidateControl('task');
		}
		else {
			$this->redirect('this');
		}
	}

	public function handleEdit($edit)
	{
		$this->edit = TRUE;
		$this->template->edit = $this->edit;
		$this->validateControl();
		$this->invalidateControl('task');
	}
?>

Toto druhe riesenie funguje tiez velmi dobre, vzdy sa ale edituje cely formular (kvoli jednoduchosti), no problem je ze musim nastylovat inputy tak, aby to vyzeralo rovnako ako vykreslena polozka je trochu narocnejsie ako v prvom pripade. Jednoznacna vyhoda vsak spociva v tom ze Validacia formulara je zachovana a nemusim sa o nu dodatocne starat zvlast na dalsom mieste.

Ktora metoda je podla vas lepsia, pripadne unika mi nieco, ako to spravit este jednoduchsie?

Dakujem!

Editoval Stic (19. 10. 2013 11:57)