2

私はbackbonejs（0.9）を最新のjquery mobile（1.3）で使用しています。ローカル データの保存に WebSql を使用しています。ホームページが読み込まれると、ローカル データベースからクエリを実行し、jquery Deferred を使用して、クエリが成功した後にコンテンツをレンダリングします。残念ながら、jquery モバイル フッターは「拡張」されません。

ビューの私の Haml テンプレートはシンプルで、次のようになります。

%div{'data-role' => 'header'}
  %div{'data-role' => 'navbar', 'data-iconpos' => 'top'}
    %ul
      %li
        %a.ui-btn-active.ui-state-persist{'href' =>''}ATAB
      %li 
        %a{'href' =>'#btab'}BTAB
%div{'data-role' => 'content'}

%div{'data-role' => 'footer', 'data-position' => 'fixed'}
  %a{'data-icon' => 'plus', 'href' => '#a_link'}A link

私の Backbonejs ビューは次のようになります (私は coffeescript を使用しています)。ルーターには既に router.templates にキャッシュされたテンプレートがあり、websql からの db レコードが読み込まれると、txnsLoadedPromise が「解決」されます。

window.HomeView = class HomeView extends Backbone.View

  initialize: (options) ->
    @template = Handlebars.compile(router.templates['/home/home'])

  render: () ->
    txnsLoadedPromise.then(
      @renderDynamic
    )
    return this

  renderDynamic: () =>
    if (transactions.length > 0)
      #generate content dynamically here and put in result
      result = {}
      $(@el).html(@template(result))
      $('[data-role="header"]').trigger('create')
      $('[data-role="footer"]').trigger('create')

これは私のビューがどのように見えるかです：

フッターが正しく表示されない

フッターのトリガー呼び出しで作成の代わりに「更新」を使用しようとしましたが、機能しません。奇妙なことに、ヘッダーの更新は適切に機能します。また、ページの動的な性質を削除すると (promise が解決されたときではなく、ビューを直接レンダリングすることを意味します)、正常に動作します (これは予想されることです)。

完全を期すために、以下は私のルーターコードです（関連する部分）

window.MyRouter = class MyRouter extends Backbone.Router

  routes: 
    "": "home"

  initialize: (options) ->
    #code for preloading view templates

  templates: {}

  home: () ->

    PageUtil.changePage new HomeView({templateKey: '/home/home'})

PageUtil クラスの changePage メソッド:

window.PageUtil = class PageUtil

  @changePage: (view, overrideOptions={}, role='page') ->
    defaultOptions={transition: 'slide', reverse: false}
    options = $.extend(defaultOptions, overrideOptions)
    view.render();
    $('body').append($(view.el));
    if window.curentView
      console.log 'removing view: ', currentView
      window.currentView.remove()
      window.currentView = view
    $.mobile.changePage(view.$el, options);

何か案は？

4

1 に答える 1

0

コードに問題があります。

最初trigger('create')はコンテンツ部分でのみ機能しtrigger('pagecreate')、ヘッダー+コンテンツ+フッターを拡張するために使用します。

私の他の記事でそれについてもっと読んでください。または、ここで見つけてください。

そこには、動的に追加されたフッターコンテンツの実用的な例があります。

動的なナビゲーションバー要素を追加している場合でも、trigger('pagecreate')役に立ちません。しかし、実用的な解決策があります：

$('#index').live('pagebeforeshow',function(e,data){    
    navbarHandler.addNewNavBarElement('navbar-test','el4','Page Four');
});


var navbarHandler = {
    addNewNavBarElement:function(navBarID, newElementID, newElementText) {
        var navbar = $("#" + navBarID);

        var li = $("<li></li>");        
        var a  = $("<a></a>");
        a.attr("id", newElementID).text(newElementText);
        li.append(a);

        navbar = navbarHandler.clearNavBarStyle(navbar);

        navbar.navbar("destroy");
        li.appendTo($("#" + navBarID + " ul"));
        navbar.navbar();
    },
    clearNavBarStyle:function(navbar){
        navbar.find("*").andSelf().each(function(){
            $(this).removeClass(function(i, cn){
                var matches = cn.match (/ui-[\w\-]+/g) || [];
                return (matches.join (' '));
            });
            if ($(this).attr("class") == "") {
                $(this).removeAttr("class");
            }
        });
        return navbar;   
    }
}
于 2013-03-05T15:26:16.460 に答える