1

I am trying to build a small mobile app with JQuery Mobile and EmberJS. This is actually a Rhodes Application (Rhomobile).

This is my Layout.erb:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Todo</title>


        <!-- Ember Libraries -->        
        <script src="/public/js/libs/handlebars-1.0.0.js"></script>
        <script src="/public/js/libs/ember.js"></script>
        <script src="/public/js/libs/ember-data.js"></script>

        <!-- Ember Application -->
        <script src="/public/js/application.js"></script>
        <script src="/public/js/router.js"></script>
        <script src="/public/js/models/todo.js"></script>
        <script src="/public/js/controllers/todos_controller.js"></script>




        <script type="text/javascript">
            $(document).bind("mobileinit", function(){    
                $.mobile.loadingMessage = false;
                $.mobile.loadingMessageDelay = 300; // in ms
                $.mobile.defaultPageTransition = 'none';
                $.mobile.defaultDialogTransition = 'none';
                $.mobile.ajaxEnabled = false;
                $.mobile.pushStateEnabled = false;
                $.mobile.loadingMessageDelay = 50; // in ms
            });
        </script>
        <link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.3.1.min.css">
        <link rel="stylesheet" href="/public/css/jqmobile-patch.css">
        <script src="/public/jqmobile/jquery.mobile-1.3.1.min.js"></script>
        <script src="/public/js/jqmobile-patch.js"></script>

</head>

<body data-platform="<%= Rho::System.getProperty('platform') %>">
    <%= @content %>
</body>

</html>

As you can see I have disabled Ajax and PushState and stuff. This is my index.erb:

  <script type="text/x-handlebars" data-template-name="todos">
    <div data-role="page">
        //My Template
      </div>
  </script>

Now when I try it, I just get a blank grey page. But no error in console or in Ember-Console (extension of Chrome). It even detects my views and controllers properly.

Then I try commenting the JqueryMobile CSS files and what I get is a page's height worth of blank space with "Loading" message and then I see my application below and it works fine. And if I remove JqueryMobile JS, I get the stuff but its not styled.

What is the problem?

1

1 Answer 1

0

It's kind of hard to say without seeing some more code of your app. If you only have the one template defined ('todos') it may be the case that Ember doesn't know how to kickstart the rendering of your app. You may need to define an 'application' template. It might be as simple as:

<script type="text/x-handlebars" data-template-name="application">
  {{outlet}}
</script>
2
  • Yes I do have only one template. Could that be the problem? Why doesnt the todos mvc app have this template? Sep 26, 2013 at 5:25
  • Very hard to say without seeing any code. Can you post a JSBin? Sep 26, 2013 at 5:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.