0

我有一个使用 jquery mobile 和主干构建的移动应用程序。我正在尝试通过路由逻辑来相应地呈现我的视图，因此我开始简单并随着我的前进而增加复杂性。

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”进行哈希更改时，“main”div 的内容（特别是带有文本“Click Here to Test Me”的 url）会消失，只有我的视图的输出被渲染在输出中，特别是函数测试中我的变量 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();
    });
  }
});

提前致谢！

4

1 回答 1

0

嗬！我没有将 jquery.mobile-1.2.0.min.css 定义为资源。添加它，一切都按预期运行。

于 2013-01-12T03:26:26.143 回答