Search code examples
javascriptjquerytemplatesbackbone.jsmarionette

How does marionette attach rendered views to the DOM


I have a very simple setup with Marionette I am trying to get working.

I have a view with a collection:

var MyItemsView = Marionette.View.extend({
    template: "#some-template"
});

var view = new MyItemsView({
    collection: new Backbone.Collection([1,2,3,4,5])
});

The template is directly imbedded in my HTML

<script id="some-template" type="text/html">
        <ul>
            <% _.each(items, function(item){ %>
            <li> <%= item %> </li>
            <% }); %>
        </ul>
</script>

I get no output.

When I try to use view.render() I also get no output. When I log console.log(view.render().el) I just get an empty <div> I don't understand how this can happen? Shouldn't the view be using the template provided?

Another update. This will render with an ItemView or a LayoutView but not a View... wtf is going on here.

This example was taken directly from the Marionette website. Is there something I am doing wrong here?


Solution

  • What version of Marionette are you using? If you are using anything before the 3.0.0 (currently beta), you should be extending from an ItemView and not a View From the Marionette documentation (v2.4.5):

    Note: The Marionette.View class is not intended to be used directly. It exists as a base view for other view classes to be extended from, and to provide a common location for behaviors that are shared across all views.

    This behavior changes in v3.0.0 as ItemView looks as though it has been removed.