So for now I have these models:
- steal('jquery/model').then(function($){
- $.Model.extend('Article',{},{});
- $.Model.extend('Widget', {}, {});
- $.Model.extend('BlocksPage', {}, {});
- $.Model.extend('Block', {
- findAll : "GET /blocks.json",
- findOne : "GET /blocks/{id}.json",
- create : "POST /blocks.json",
- update : "PUT /blocks/{id}.json",
- destroy : "DELETE /blocks/{id}.json",
- attributes : {
- Widget : "Widget.model",
- BlocksPage : "BlocksPage.model",
- Article : "Article.model"
- }
- },{});
- $.Model.extend('Container', {
- attributes : {
- Containers : "Container.models",
- Blocks : "Block.models"
- }
- },{});
- $.Model.extend('Subdomain',{},{});
- $.Model.extend('Page', {
- findAll : "GET /pages.json",
- findOne : "GET /pages/{id}.json",
- create : "POST /pages.json",
- update : "PUT /pages/{id}.json",
- destroy : "DELETE /pages/{id}.json",
- attributes : {
- Layout : "Container.model",
- Subdomain : "Subdomain.model"
- }
- },{});
- })
So basically I have model page which has a layout which consists of a number of containers which can all have sub-containers and/or blocks/widgets in them. I'm aware that this is not the most beautiful way to set it up, but this is mostly just a test setup.
So then at the end of my html I have a script tag which looks like this:
So then at the end of my html I have a script tag which looks like this:
- <script>
- steal('jquery/view/ejs', 'model/block.js').then(function() {
- Page.findOne({id: <?=$page['id']?>}, function( page ){
- // print out the todo name
- console.log(page);
- $('body').model(page.Layout);
- $('body').html('//view/layout.ejs', page.Layout);
- });
- });
- </script>
Now the page object is succesfully pulled from the server. The console.log shows me the desired output. I'd love to show you the JSON, but I don't know how to paste it in a readable way. So my view has a lot of subviews. Here they are:
layout.ejs:
layout.ejs:
- <% var count = Blocks.length + Containers.length; %>
- <% for(var i=0; i < count; i++){ %>
- <% if (Blocks.length && parseInt(Blocks[0].BlocksPage.index) == i) { %>
- <%== $.View("//view/block.ejs", Blocks.shift()); %>
- <% } else { %>
- <%== $.View("//view/container.ejs", Containers.shift()); %>
- <% } %>
- <% } %>
container.ejs (basically the same as layout.ejs):
- <div <%= this %>>
- <% var count = Blocks.length + Containers.length; %>
- <% for(var i=0; i < count; i++){ %>
- <% if (Blocks.length && parseInt(Blocks[0].BlocksPage.index) == i) { %>
- <%== $.View("//view/block.ejs", Blocks.shift()); %>
- <% } else { %>
- <%== $.View("//view/container.ejs", Containers.shift()); %>
- <% } %>
- <% } %>
- </div>
and block.ejs:
- <div <%= this %>>
- <article <%= this.Article %>>
- <%== this.Article.body %>
- </article>
- </div>
As you can probably tell, I have no idea what I'm doing. Can anybody please explain to me what I am doing wrong?
[edit] Okay I did find a way to make my JSON slightly more readable:
[edit] Okay I did find a way to make my JSON slightly more readable:
- {
- "id": "1",
- "parent_id": null,
- "subdomain_id": "1",
- "container_id": "1",
- "path": "/home",
- "name": "home",
- "published": true,
- "createdAt": "0000-00-00 00:00:00",
- "modified": "2012-10-18 02:04:42",
- "lft": "1",
- "rght": "4",
- "Subdomain": {
- "id": "1",
- "name": "www"
- },
- "Layout": {
- "id": "1",
- "parent_id": null,
- "name": "default",
- "lft": "1",
- "rght": "12",
- "Blocks": [],
- "Containers": [
- {
- "id": "2",
- "parent_id": "1",
- "name": "header",
- "lft": "2",
- "rght": "3",
- "Blocks": [],
- "Containers": []
- },
- {
- "id": "3",
- "parent_id": "1",
- "name": "content",
- "lft": "4",
- "rght": "9",
- "Blocks": [
- {
- "id": "3",
- "widget_id": "1",
- "pass": "a:1:{s:2:\"id\";s:1:\"2\";}",
- "BlocksPage": {
- "id": "5",
- "block_id": "3",
- "page_id": "1",
- "container_id": "3",
- "index": "0"
- },
- "Widget": {
- "id": "1",
- "name": "Article",
- "Article": {
- "id": "2",
- "user_id": "0",
- "title": "Is dit de eerste?",
- "body": "<p>Hello World!</p>",
- "User": {
- "id": null,
- "username": null,
- "password": null,
- "createdAt": null,
- "modified": null
- }
- }
- },
- "element": "ContentManagement.article/view",
- "data": {
- "id": "3",
- "widget_id": "1",
- "pass": "a:1:{s:2:\"id\";s:1:\"2\";}",
- "BlocksPage": {
- "id": "5",
- "block_id": "3",
- "page_id": "1",
- "container_id": "3",
- "index": "0"
- },
- "Widget": {
- "id": "1",
- "name": "Article"
- },
- "Article": {
- "id": "2",
- "user_id": "0",
- "title": "Is dit de eerste?",
- "body": "<p>Hello World!</p>"
- }
- }
- }
- ],
- "Containers": [
- {
- "id": "10",
- "parent_id": "3",
- "name": "test",
- "lft": "5",
- "rght": "8",
- "Blocks": [],
- "Containers": [
- {
- "id": "11",
- "parent_id": "10",
- "name": "test2",
- "lft": "6",
- "rght": "7",
- "Blocks": [
- {
- "id": "2",
- "widget_id": "1",
- "pass": "a:1:{s:2:\"id\";s:1:\"1\";}",
- "BlocksPage": {
- "id": "6",
- "block_id": "2",
- "page_id": "1",
- "container_id": "11",
- "index": "0"
- },
- "Widget": {
- "id": "1",
- "name": "Article",
- "Article": {
- "id": "1",
- "user_id": "2",
- "title": "Blaat",
- "body": "<p>Lalalala</p>"
- }
- },
- "element": "ContentManagement.article/view",
- "data": {
- "id": "2",
- "widget_id": "1",
- "pass": "a:1:{s:2:\"id\";s:1:\"1\";}",
- "BlocksPage": {
- "id": "6",
- "block_id": "2",
- "page_id": "1",
- "container_id": "11",
- "index": "0"
- },
- "Widget": {
- "id": "1",
- "name": "Article"
- },
- "Article": {
- "id": "1",
- "user_id": "2",
- "title": "Blaat",
- "body": "<p>Lalalala</p>"
- }
- }
- }
- ],
- "Containers": []
- }
- ]
- }
- ]
- },
- {
- "id": "4",
- "parent_id": "1",
- "name": "footer",
- "lft": "10",
- "rght": "11",
- "Blocks": [],
- "Containers": []
- }
- ]
- }
- }