Question

I have a mobile app built using jquery mobile and backbone. I’m trying to work through the routing logic to render my views accordingly and am thus starting simple and adding complexity as I go along.

The html is as follows

<div id="main">
  <li><a href="#test_me">Click Here to Test Me</a></li>
</div>

<div id="view-goes-here"></div>

<script type="text/template" id="actions-template">
  <table cellspacing='0' cellpadding='0' border='1' >
    <thead>
      <tr>
        <th>Id</th>
        <th>Str</th>
      </tr>
    </thead>
    <tbody>
      <% _.each(action, function(c) { %> 
        <% var f = c.id, g = c.str; %>
          <tr>
            <td class="<%= f %>"><%= c.id %></td>
            <td class="<%= g %>"><%= c.str %></td>
          </tr>
      <% }); %>
    </tbody>
  </table>

</script>

Here is a jsfiddle with functional code: http://jsfiddle.net/horcle_buzz/4JGhZ/

I would like it so that when I do a hashchange to “test_me” then the contents of the “main” div (specifically, the url with text “Click Here to Test Me”) would disappear with only the output from my view being rendered in the output, specifically the table contents from my variable c in the function test:

 var c = [
    { id: 1, str: 'This'},
    { id: 2, str: 'is'},
    { id: 3, str: 'a'},
    { id: 4, str: 'test!'}
  ];

My view is as follows:

var ActionView = Backbone.View.extend({
    template: ActionTemplate,
    events:{
      "click":"makeInput"
    },
    render:function(){
      alert("a" + JSON.stringify(this.collection));
      alert("b" + this.collection.toJSON());
      $(this.el).html(this.template({
        action: this.collection.toJSON()
      }));
      $('#view-goes-here').append(this.el);
      return this;
    },
    makeInput:function(){
      alert("im in");
    }
    });

My guess is that I would have to use the data-role=page tag for my divs, but when I do this, the view does not render as expected. I am slightly confused about how to get the desired output, especially since most examples out there are rather basic.

I disable jQuery Mobile routing as follows and then start Backbone history:

$(document).ready(function(){

  $.mobile.linkBindingEnabled = false;
  $.mobile.hashListeningEnabled = false;
  var router = new ActionsRoute();
  Backbone.history.start();
});

Routing is done as follows:

var ActionsRoute = Backbone.Router.extend({
  routes: {
    '': 'main',
    'test_me': 'loader' 
  }, 
  main: function() {
    $.mobile.changePage( "#main" , { reverse: false, changeHash: false } );
  },
  loader: function() {
    test(function(c,  Actions, ActionView){
      alert("Data:" + JSON.stringify(c));
      var actions = new Actions(c);
      var actionView = new ActionView({collection:actions});
      actionView.render();
    });
  }
});   

Thanks in advance!

Answer 1

Doh! I did not have jquery.mobile-1.2.0.min.css defined as a resource. Added it, and all is behaving as desired.