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

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

$
0
0
I haven't dug into your code to know for sure -- and we use canjs instead of jQueryMX, so there might be differences there -- but here are a few things I notice which might be causing problems in your ejs templates:
  1. Using your own variables (via var) and control statements (like for) generally causes problems, especially if you want to use live-binding later. For me, it helps to think of ejs not as a script which gets executed from start to end, but as a collection of separate functions which are in charge of keeping their enclosed content up-to-date. So, if you have a variable or manual control statement somewhere (instead of always only using the attributes and .each functions of the params being passed into the template), it's possibly a sign that you should be doing something in 'normal' javascript code instead of ejs.

  2. In general you should never modify a variable or property within your view -- like calling .shift() on Blocks and Containers. It's possible that this might be okay if you don't use/need live-binding, but as a general philosophy a view should never alter or change the state of the params it's given.

I'd try moving your Blocks- and Containers-rendering code out of layout.ejs and container.ejs entirely, and have a standalone bit of javascript which renders block.ejs (and any other templates) and appends the result directly. That way, you only have templates for things which are actually content, and the work of walking through your json to determine what to render can live near your other model-processing code.

I haven't tested to be sure, but it seems like something like this might work:
  1. function renderLayout($element, Blocks, Containers) {
  2.       var count = Blocks.length + Containers.length;
  3.       var nextContainer;
  4.       for(var i=0; i < count; i++){
  5.             if (Blocks.length && parseInt(Blocks[0].BlocksPage.index) == i) {
  6.                   $element.append($.View("//view/block.ejs", Blocks.shift());
  7.             } else {
  8.                   nextContainer = Containers.shift();
  9.                   renderContainer($element, nextContainer.Blocks, nextContainer.Containers);
  10.             }
  11.       }
  12. }
  13. // and then renderContainer looks basically the same as renderLayout. Or, you might be able to just reuse renderLayout instead of needing a separate function.

Ideally you probably wouldn't want to use global functions, or have those functions modify their arguments or make side effects, but I suspect that translating layout.ejs and container.ejs into normal javascript would probably help with some of the issues you're running into.


Viewing all articles
Browse latest Browse all 3491

Trending Articles