Question

我有一个使用jquery mobile和backbone构建的移动应用程序。我正在尝试通过路由逻辑来相应地渲染我的视图，因此我开始变得简单，并且随着我的进展增加了复杂性。

html如下

<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>

这是一个包含功能代码的jsfiddle：http://jsfiddle.net/horcle_buzz/4JGhZ/

我希望这样当我对“test_me”做一个hashchange时，那么“main”div的内容（特别是带有文本“点击这里测试我”的url）将会消失，只有我的输出视图在输出中呈现，特别是函数test中变量c的表内容：

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

我的观点如下：

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");
    }
    });

我的猜测是我必须为我的div使用data-role = page标签，但是当我这样做时，视图不会按预期呈现。我对如何获得所需的输出感到有些困惑，特别是因为大多数例子都是基本的。

我按如下方式禁用jQuery Mobile路由，然后启动Backbone历史记录：

$(document).ready(function(){

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

路由按如下方式完成：

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();
    });
  }
});

提前致谢！

Answer 1

卫生署！我没有将jquery.mobile-1.2.0.min.css定义为资源。添加它，并且所有操作都符合要求。

骨干路由加载data-role = page

1 个答案: