Search code examples
javascriptjsonmarionette

Maerionette giving ReferenceError: menuGroup is not defined

I have this template:

<script type="text/template" id="menu-template">
  <a ><li data-menuGroup="<%= menuGroup %>" class="<%=liClass%>" id="<%= liId%>"><%=name%></li></a>
</script>

this JSON:

{"id":5,"menuId":2,"name":"Home","liId":"reports_home_sub_menu","liClass":"tab","targetDiv":"reportHome","contentName":"qado_reports_home","url":"","callback":"","orderBy":1,"privilage":"","menuGroup":"reportsTab"}

and this Marionette Javascript:

View = Backbone.Marionette.ItemView.extend({
    template: "#menu-template"
});
var model = new Backbone.Model(json);   
var view = new View(model);
view.render();
$("#menuContainer").append(view.el);

but when I run this, I get a " ReferenceError: menuGroup is not defined" error in the console. I am very new to Marionette so it's probably something stupid. But the JSON clearly has an item "menuGroup" in it, so what am I missing?

Solution

  • You are close. First, make sure your JSON-string is parsed into a JavaScript object. Secondly, the View constructor function does not take a model as a parameter, but an options object, which has a model-field.

    var modelData = JSON.parse(json);
var model = new Backbone.Model(modelData);   
var view = new View({model: model});