0

jquery モバイルとバックボーンを使用して構築されたモバイル アプリがあります。それに応じてビューをレンダリングするためにルーティングロジックを処理しようとしているため、単純なものから始めて、進むにつれて複雑さを増しています。

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」にハッシュ変更を行うと、「メイン」divのコンテンツ（具体的には、「ここをクリックしてテストしてください」というテキストを含む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 ルーティングを無効にしてから、バックボーン履歴を開始します。

$(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 に答える