Edit Field Directive - Data Model

[ansonphong]

Hi Michel, The Edit Field directive is ready for your review.

Much of the prototype is in place in terms of inserting HTML. Now it is ready for you to work your magic, which will lead-in to the methods for the Edit Post directive and routing methods which I plan to document this week.

If you look in /dev/theme/ you will find a template called : edit-post.php

If you copy that to your theme folder, and make a new page with that template set (Edit Post), then you will see a working example of the directive.

It currently allows you to produce an input field, or a select field, or a text-area, with various settings which are documented here.

https://github.com/phongmedia/postworld/tree/master/js#edit-field--postworlddirective-

What I would like to do with it which I am looking for your help with :

1. Setup a 'bind' data attribute, which binds it to the specified model via ng-model. For instance, with this :

<span edit-field="post_title" data-input="input-text" data-bind="edit_fields.post_title"></span>

The post_title field should be bound to the edit_fields.post_title variable, so when we update this on the DOM, the model changes - so when we're ready to save the post via AJAX, all we have to do is submit the edit_fields object to pw_update/insert_post() PHP method.

Does this make sense? What's the best way to do this? There are other more advanced fields which we'll want to have controllers synching up to a central object, although this is a good place to start.

[ansonphong]

On the same topic - I began documentation on the edit-form controller. https://github.com/phongmedia/postworld/tree/master/js#edit-form---controller--

Feel free to add to the documentation or send me your thoughts. You can begin it any time you're ready and we can document all the implementation methods for future reference and for making it open-source ready.

[michelhabib]

Phong, is this some kind of form generator? Could you please explain on a higher level with a real example? I understand that you want to dynamically create form fields, bind them to data returned by server, allow for updating data as well. But Can you please shed some light on the purpose? How will that be used?

In the load panel directive [i will probably rename that to search panel] - i am using some AngularJS features that simplify this kind of forms. i can easily add form elements[via html], by just binding them to the args.fieldname respectively. This way, i can always add as many elements to the form, without changing a single line of code that works between the DOM and the Service, i always use a common interface that passes the args parameter. But i am still creating the html elements manually [check any of the panels i created]

Maybe we can discuss this more in our meeting today.

[ansonphong]

Hi Michel, Thanks for asking. I should have clarified this earlier.

Here you will find a concept design of the 'edit post' page, where users can create and edit posts from the Wordpress frontend, without needing to use the over-complex backend CMS.

The edit-field directive is intended for use by developers in building various sized forms with different fields depending on post type and user capabilities.

When building the form template, the edit-field directive is intended to make it as easy as possible for developers to spin up a new form and customize the input fields without too much work.

This would go hand-in-hand with the edit-form controller, which would then be able to submit the data to the specified callback function via AJAX, and receive the response, such as 'saved' with updated permalink data or 'error'.

We can discuss more on our call soon.