Question

I’m trying to render a mooml template I created on the fly and am getting null when I call render.

Here is my code:

var myTpl = Mooml.Template('tpl', function() {
  div({class: 'new-container'},
    div({class: 'new-title'},
      div({class: 'new-text'},
        'Put your title here:'
      ),
      div({class: 'new-input'},
        input({type: 'text', name: 'title', class: 'required', title: 'Title'})
      )
    ),
    div({class: 'new-content'},
      form({method: 'post', action: '#'},
        textarea({name: 'content', style: 'width: 100%'})
      )
    )
  );
});

// el is null after executing render
var el = myTpl.render(); 

I looked at some of the variables in firebug and the myTpl var isn’t null and neither is the render method. I don’t know much about what mooml is doing under the hood, but I would think what I have should work given the following example which is found here:

var template = new Mooml.Template('mytemplate', function() {
    div('Template on the fly');
});

template.render(); // returns <div>Template on the fly</div>

As always, any help is much appreciated.

Answer 1

heh, i had a horrid time looking at this, mostly because your nested tags are written so messy and looking for a mismatch/syntax error it made me overlook the fact that you fail to insitgate the class properly.

var foo = new Mooml.Template('tpl', function() {
    div({"class": 'new-container'},
        div({"class": 'new-title'},
            div({"class": 'new-text'}, 'Put your title here:'),
            div({"class": 'new-input'},
                input({
                      type: 'text',
                      name: 'title',
                      "class": 'required',
                      title: 'Title'
                })
            )
        ),
        div({"class": 'new-content'},
            form({method: 'post', action: '#'},
                textarea({
                    name: 'content',
                    style: 'width: 100%'
                })
            ) // form
        ) // new-content
    ); // end div function
}).render();

foo.inject(document.body);

this works. http://jsfiddle.net/YKTyL/2/

notice new Mooml.Template as opposed to passing a reference to the class itself. it’s staring us right there from the example which is correct…

also, i changed instances where you say class: something as class is a reserved keyword in IE and needs to be quoted in ” ”