Re: DOM messed up after loading new, , #app-content as TemplateResponse via Ajax

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Re: DOM messed up after loading new, , #app-content as TemplateResponse via Ajax

marmuDev
"I suppose you want to have a full ownCloud page when a user loads the
app, and when he clicks something in the navigation, you want to load
html into the content area."

Yes, that's how it's done for now. But I don't get how other apps, like
files and trashbin do it. After clicking on other links in the
navigation, they reload the files list table without rendering a
complete template. Navigation and stuff doesn't seem to be
reloaded/rerendered. How do they trigger JS functions loaded with the
normal TemplateResponse for the index page to rebuild the file list?

Thanks again, I already feel like sending you a small gift down south.
Just send me your address.




_______________________________________________
Devel mailing list
[hidden email]
http://mailman.owncloud.org/mailman/listinfo/devel
Reply | Threaded
Open this post in threaded view
|

Re: DOM messed up after loading new, , #app-content as TemplateResponse via Ajax

Bernhard Posselt-2
The files app does not use TemplateResponses for rendering the content.
It listens for clicks on the navigation and loads JSON based on the URL
and then uses client side templating to render the content.

If you want to mimic that behavior its not actually that hard and
although you dont want to dive into clientside templating quite yet, the
entry hurdle might be lower for you than you'd actually think.

If you leave out routing via the URL its basically just:

* Load the initial page and add all the JS libs using a TemplateResponse
and simple template
* Bind click listeners on navigation entries
* Clicking on a navigation item makes a $.get call to a route and
controller which returns JSON instead of HTML
* You rerender the template with the new JSON object, put it into the
app-content area and rebind the event handlers (if not already done
using the $.on method)

Here's a very small and minimal example how that might look like:
http://jsbin.com/cuxawetuwe/1/edit?html,js,output

Routing using the URL can very easily added by using a JavaScript
framework: Angular, Backbone, whatever. If you also want the initial
content and navigation to be loaded using clientside templating, just
create a spinner and create two get requests to your controller methods
that return the initial JSON objects.

PS: The notes app is very basic and should give you an idea how it could
work https://github.com/owncloud/app-tutorial/ if you are having
troubles understanding the tutorial
https://doc.owncloud.org/server/8.0/developer_manual/app/tutorial.html
please file an issue with the exact problem on the documentation
bugtracker https://github.com/owncloud/documentation/issues

\o/ just check my amazon wishlist :D
http://www.amazon.de/gp/registry/wishlist/ref=nav_wish_list

On 04/13/2015 11:19 AM, Marcus Mundt wrote:

> "I suppose you want to have a full ownCloud page when a user loads the
> app, and when he clicks something in the navigation, you want to load
> html into the content area."
>
> Yes, that's how it's done for now. But I don't get how other apps,
> like files and trashbin do it. After clicking on other links in the
> navigation, they reload the files list table without rendering a
> complete template. Navigation and stuff doesn't seem to be
> reloaded/rerendered. How do they trigger JS functions loaded with the
> normal TemplateResponse for the index page to rebuild the file list?
>
> Thanks again, I already feel like sending you a small gift down south.
> Just send me your address.
>
>
>
>
> _______________________________________________
> Devel mailing list
> [hidden email]
> http://mailman.owncloud.org/mailman/listinfo/devel

_______________________________________________
Devel mailing list
[hidden email]
http://mailman.owncloud.org/mailman/listinfo/devel
Reply | Threaded
Open this post in threaded view
|

Re: DOM messed up after loading new, , #app-content as TemplateResponse via Ajax

Bernhard Posselt-2
A crap, wrong wishlist link :P
http://www.amazon.de/registry/wishlist/2A6QIIUF08F90

On 04/13/2015 12:46 PM, Bernhard Posselt wrote:

> The files app does not use TemplateResponses for rendering the content.
> It listens for clicks on the navigation and loads JSON based on the URL
> and then uses client side templating to render the content.
>
> If you want to mimic that behavior its not actually that hard and
> although you dont want to dive into clientside templating quite yet, the
> entry hurdle might be lower for you than you'd actually think.
>
> If you leave out routing via the URL its basically just:
>
> * Load the initial page and add all the JS libs using a TemplateResponse
> and simple template
> * Bind click listeners on navigation entries
> * Clicking on a navigation item makes a $.get call to a route and
> controller which returns JSON instead of HTML
> * You rerender the template with the new JSON object, put it into the
> app-content area and rebind the event handlers (if not already done
> using the $.on method)
>
> Here's a very small and minimal example how that might look like:
> http://jsbin.com/cuxawetuwe/1/edit?html,js,output
>
> Routing using the URL can very easily added by using a JavaScript
> framework: Angular, Backbone, whatever. If you also want the initial
> content and navigation to be loaded using clientside templating, just
> create a spinner and create two get requests to your controller methods
> that return the initial JSON objects.
>
> PS: The notes app is very basic and should give you an idea how it could
> work https://github.com/owncloud/app-tutorial/ if you are having
> troubles understanding the tutorial
> https://doc.owncloud.org/server/8.0/developer_manual/app/tutorial.html
> please file an issue with the exact problem on the documentation
> bugtracker https://github.com/owncloud/documentation/issues
>
> \o/ just check my amazon wishlist :D
> http://www.amazon.de/gp/registry/wishlist/ref=nav_wish_list
>
> On 04/13/2015 11:19 AM, Marcus Mundt wrote:
>> "I suppose you want to have a full ownCloud page when a user loads the
>> app, and when he clicks something in the navigation, you want to load
>> html into the content area."
>>
>> Yes, that's how it's done for now. But I don't get how other apps,
>> like files and trashbin do it. After clicking on other links in the
>> navigation, they reload the files list table without rendering a
>> complete template. Navigation and stuff doesn't seem to be
>> reloaded/rerendered. How do they trigger JS functions loaded with the
>> normal TemplateResponse for the index page to rebuild the file list?
>>
>> Thanks again, I already feel like sending you a small gift down south.
>> Just send me your address.
>>
>>
>>
>>
>> _______________________________________________
>> Devel mailing list
>> [hidden email]
>> http://mailman.owncloud.org/mailman/listinfo/devel
> _______________________________________________
> Devel mailing list
> [hidden email]
> http://mailman.owncloud.org/mailman/listinfo/devel

_______________________________________________
Devel mailing list
[hidden email]
http://mailman.owncloud.org/mailman/listinfo/devel