Quantcast
Channel: JavaScriptMVC Forum
Viewing all articles
Browse latest Browse all 3491

I can't get my view to work, it doesn't do anything at all.

$
0
0
So for now I have these models:
  1. steal('jquery/model').then(function($){
  2.     $.Model.extend('Article',{},{});
  3.     $.Model.extend('Widget', {}, {});
  4.     $.Model.extend('BlocksPage', {}, {});    
  5.     
  6.     $.Model.extend('Block', {
  7.         findAll        : "GET /blocks.json",
  8.         findOne        : "GET /blocks/{id}.json",
  9.         create        : "POST /blocks.json",
  10.         update        : "PUT /blocks/{id}.json",
  11.         destroy        : "DELETE /blocks/{id}.json",
  12.         attributes    : {
  13.                 Widget    : "Widget.model",
  14.                 BlocksPage    : "BlocksPage.model",
  15.                 Article    : "Article.model"
  16.         }
  17.     },{});
  18.     
  19.     $.Model.extend('Container', {
  20.         attributes    : {
  21.                 Containers    : "Container.models",
  22.                 Blocks    : "Block.models"
  23.         }
  24.     },{});
  25.     
  26.     $.Model.extend('Subdomain',{},{});
  27.     
  28.     $.Model.extend('Page', {
  29.         findAll        : "GET /pages.json",
  30.         findOne        : "GET /pages/{id}.json",
  31.         create        : "POST /pages.json",
  32.         update        : "PUT /pages/{id}.json",
  33.         destroy        : "DELETE /pages/{id}.json",
  34.         attributes    : {
  35.                 Layout    : "Container.model",
  36.                 Subdomain    : "Subdomain.model"
  37.         }
  38.     },{});
  39. })
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:
  1. <script>
  2.     steal('jquery/view/ejs', 'model/block.js').then(function() {
  3.         Page.findOne({id: <?=$page['id']?>}, function( page ){
  4.           // print out the todo name
  5.           console.log(page);
  6.           $('body').model(page.Layout);
  7.           $('body').html('//view/layout.ejs', page.Layout);
  8.         });
  9.     });
  10. </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:
  1. <% var count = Blocks.length + Containers.length; %>
  2. <% for(var i=0; i < count; i++){ %>
  3.     <% if (Blocks.length && parseInt(Blocks[0].BlocksPage.index) == i) { %>
  4.         <%== $.View("//view/block.ejs", Blocks.shift()); %>
  5.     <% } else { %>
  6.         <%== $.View("//view/container.ejs", Containers.shift()); %>
  7.     <% } %>
  8. <% } %>
container.ejs (basically the same as layout.ejs):
  1. <div <%= this %>>
  2.     <% var count = Blocks.length + Containers.length; %>
  3.     <% for(var i=0; i < count; i++){ %>
  4.         <% if (Blocks.length && parseInt(Blocks[0].BlocksPage.index) == i) { %>
  5.             <%== $.View("//view/block.ejs", Blocks.shift()); %>
  6.         <% } else { %>
  7.             <%== $.View("//view/container.ejs", Containers.shift()); %>
  8.         <% } %>
  9.     <% } %>
  10. </div>
and block.ejs:
  1. <div <%= this %>>
  2.     <article <%= this.Article %>>
  3.         <%== this.Article.body %>
  4.     </article>
  5. </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:
  1. {
  2.     "id": "1",
  3.     "parent_id": null,
  4.     "subdomain_id": "1",
  5.     "container_id": "1",
  6.     "path": "/home",
  7.     "name": "home",
  8.     "published": true,
  9.     "createdAt": "0000-00-00 00:00:00",
  10.     "modified": "2012-10-18 02:04:42",
  11.     "lft": "1",
  12.     "rght": "4",
  13.     "Subdomain": {
  14.         "id": "1",
  15.         "name": "www"
  16.     },
  17.     "Layout": {
  18.         "id": "1",
  19.         "parent_id": null,
  20.         "name": "default",
  21.         "lft": "1",
  22.         "rght": "12",
  23.         "Blocks": [],
  24.         "Containers": [
  25.             {
  26.                 "id": "2",
  27.                 "parent_id": "1",
  28.                 "name": "header",
  29.                 "lft": "2",
  30.                 "rght": "3",
  31.                 "Blocks": [],
  32.                 "Containers": []
  33.             },
  34.             {
  35.                 "id": "3",
  36.                 "parent_id": "1",
  37.                 "name": "content",
  38.                 "lft": "4",
  39.                 "rght": "9",
  40.                 "Blocks": [
  41.                     {
  42.                         "id": "3",
  43.                         "widget_id": "1",
  44.                         "pass": "a:1:{s:2:\"id\";s:1:\"2\";}",
  45.                         "BlocksPage": {
  46.                             "id": "5",
  47.                             "block_id": "3",
  48.                             "page_id": "1",
  49.                             "container_id": "3",
  50.                             "index": "0"
  51.                         },
  52.                         "Widget": {
  53.                             "id": "1",
  54.                             "name": "Article",
  55.                             "Article": {
  56.                                 "id": "2",
  57.                                 "user_id": "0",
  58.                                 "title": "Is dit de eerste?",
  59.                                 "body": "<p>Hello World!</p>",
  60.                                 "User": {
  61.                                     "id": null,
  62.                                     "username": null,
  63.                                     "password": null,
  64.                                     "createdAt": null,
  65.                                     "modified": null
  66.                                 }
  67.                             }
  68.                         },
  69.                         "element": "ContentManagement.article/view",
  70.                         "data": {
  71.                             "id": "3",
  72.                             "widget_id": "1",
  73.                             "pass": "a:1:{s:2:\"id\";s:1:\"2\";}",
  74.                             "BlocksPage": {
  75.                                 "id": "5",
  76.                                 "block_id": "3",
  77.                                 "page_id": "1",
  78.                                 "container_id": "3",
  79.                                 "index": "0"
  80.                             },
  81.                             "Widget": {
  82.                                 "id": "1",
  83.                                 "name": "Article"
  84.                             },
  85.                             "Article": {
  86.                                 "id": "2",
  87.                                 "user_id": "0",
  88.                                 "title": "Is dit de eerste?",
  89.                                 "body": "<p>Hello World!</p>"
  90.                             }
  91.                         }
  92.                     }
  93.                 ],
  94.                 "Containers": [
  95.                     {
  96.                         "id": "10",
  97.                         "parent_id": "3",
  98.                         "name": "test",
  99.                         "lft": "5",
  100.                         "rght": "8",
  101.                         "Blocks": [],
  102.                         "Containers": [
  103.                             {
  104.                                 "id": "11",
  105.                                 "parent_id": "10",
  106.                                 "name": "test2",
  107.                                 "lft": "6",
  108.                                 "rght": "7",
  109.                                 "Blocks": [
  110.                                     {
  111.                                         "id": "2",
  112.                                         "widget_id": "1",
  113.                                         "pass": "a:1:{s:2:\"id\";s:1:\"1\";}",
  114.                                         "BlocksPage": {
  115.                                             "id": "6",
  116.                                             "block_id": "2",
  117.                                             "page_id": "1",
  118.                                             "container_id": "11",
  119.                                             "index": "0"
  120.                                         },
  121.                                         "Widget": {
  122.                                             "id": "1",
  123.                                             "name": "Article",
  124.                                             "Article": {
  125.                                                 "id": "1",
  126.                                                 "user_id": "2",
  127.                                                 "title": "Blaat",
  128.                                                 "body": "<p>Lalalala</p>"
  129.                                             }
  130.                                         },
  131.                                         "element": "ContentManagement.article/view",
  132.                                         "data": {
  133.                                             "id": "2",
  134.                                             "widget_id": "1",
  135.                                             "pass": "a:1:{s:2:\"id\";s:1:\"1\";}",
  136.                                             "BlocksPage": {
  137.                                                 "id": "6",
  138.                                                 "block_id": "2",
  139.                                                 "page_id": "1",
  140.                                                 "container_id": "11",
  141.                                                 "index": "0"
  142.                                             },
  143.                                             "Widget": {
  144.                                                 "id": "1",
  145.                                                 "name": "Article"
  146.                                             },
  147.                                             "Article": {
  148.                                                 "id": "1",
  149.                                                 "user_id": "2",
  150.                                                 "title": "Blaat",
  151.                                                 "body": "<p>Lalalala</p>"
  152.                                             }
  153.                                         }
  154.                                     }
  155.                                 ],
  156.                                 "Containers": []
  157.                             }
  158.                         ]
  159.                     }
  160.                 ]
  161.             },
  162.             {
  163.                 "id": "4",
  164.                 "parent_id": "1",
  165.                 "name": "footer",
  166.                 "lft": "10",
  167.                 "rght": "11",
  168.                 "Blocks": [],
  169.                 "Containers": []
  170.             }
  171.         ]
  172.     }
  173. }

Viewing all articles
Browse latest Browse all 3491

Trending Articles