Backbone和jQuery Mobile：所有頁面上的相同標題

我負責開發Web應用程序。Backbone和jQuery Mobile：所有頁面上的相同標題

我做了很多研究，最後決定用Backbone和jQuery Mobile開發這個webapp。如你所知，jQuery Mobile和BackBone之間存在一些路由衝突。我決定使用Backbone路由，所以我禁用了jQM路由，這要歸功於本教程：http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/。

我開始構建一個只有3個視圖和一個路由器的示例應用程序（沒有jQM）。它完美的作品。 You can run this application here。我自願爲下一部分提供jQuery Mobile HTML標籤。

現在，我想用jQuery Mobile做同樣的事情：爲所有模板保留相同的頭文件。以前的教程確實對我有所幫助，但我仍然對jQM的DOM系統感到困惑。

我已經試過是在這裏：

的index.html（pastebin.com/PcHDaZ2P）

<head> 
    <title></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/> 

    <!-- The Templates --> 
    <script type="text/template" id="home"> 
      <p>This is Home page.</p> 
      <ul data-role="listview" data-inset="true"> 
       <li><a href="#page1">Page 1</a></li> 
       <li><a href="#page2">Page 2</a></li> 
      </ul> 
    </script> 

    <script type="text/template" id="page1"> 
      <p>This is Page 1.</p> 
      <ul data-role="listview" data-inset="true"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#page2">Page 2</a></li> 
      </ul> 
    </script> 

    <script type="text/template" id="page2"> 
      <p>This is Page 2.</p> 
      <ul data-role="listview" data-inset="true"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#page1">Page 1</a></li> 
      </ul> 
    </script> 

    <!-- The Scripts --> 
    <script src="lib/jquery-1.7.1.min.js"></script> 
    <script src="js/jqm-config.js"></script> 
    <script src="lib/jquery.mobile-1.0.1.min.js"></script> 
    <script src="lib/underscore-min.js"></script> 
    <script src="lib/backbone-min.js"></script> 
    <script src="js/main.js"></script> 
</head> 

<body> 
    <!-- The fixed header --> 
    <div data-role="header"> 
      <a href="#" data-icon="home">Home</a> 
      <h1>Header</h1> 
    </div> 

    <!-- THE CONTENT FOR THE TEMPLATES --> 
    <div data-role="content" id="app-content"> 
    </div> 
</body>

main.js（pastebin.com/2GXurpby）

window.HomeView = Backbone.View.extend({ 

    template:_.template($('#home').html()), 

    render:function (eventName) { 
     $(this.el).html(this.template()); 
     return this; 
    } 
}); 

window.Page1View = Backbone.View.extend({ 

    template:_.template($('#page1').html()), 

    render:function (eventName) { 
     $(this.el).html(this.template()); 
     return this; 
    } 
}); 

window.Page2View = Backbone.View.extend({ 

    template:_.template($('#page2').html()), 

    render:function (eventName) { 
     $(this.el).html(this.template()); 
     return this; 
    } 
}); 

var AppRouter = Backbone.Router.extend({ 

    routes:{ 
     "":"home", 
     "page1":"page1", 
     "page2":"page2" 
    }, 

    initialize:function() { 
     // Handle back button throughout the application 
     $('.back').live('click', function(event) { 
      window.history.back(); 
      return false; 
     }); 
     this.firstPage = true; 
    }, 

    home:function() { 
     console.log('#home'); 
     this.changePage(new HomeView()); 
    }, 

    page1:function() { 
     console.log('#page1'); 
     this.changePage(new Page1View()); 
    }, 

    page2:function() { 
     console.log('#page2'); 
     this.changePage(new Page2View()); 
    }, 

    changePage:function (page) { 
     console.log($(page.el)); 
     $(page.el).attr('data-role', 'page'); 
     page.render(); 
     $('#app-content').append($(page.el)); 
     var transition = $.mobile.defaultPageTransition; 
     // We don't want to slide the first page 
     if (this.firstPage) { 
      transition = 'none'; 
      this.firstPage = false; 
     } 
     $.mobile.changePage($(page.el), {changeHash:false, transition: transition}); 
    } 

}); 

$(document).ready(function() { 
    console.log('document ready'); 
    app = new AppRouter(); 
    Backbone.history.start(); 
});

但它不」工作。

那麼，你能幫我實現這個系統：對於所有的模板都有相同的頭文件，只有app-content div中的變量內容與jQuery Mobile？

來源

2013-04-23 econym

你是什麼意思「它不工作」？ JQM沒有正確設置標題？如果是這樣，我的猜測是，這是因爲您將數據角色頁面添加到未封裝標題的元素，因此JQM不知道要通過該代碼運行。 – 2013-04-25 01:11:16

感謝您的評論！我的意思是沒有顯示任何內容，如http://angely.dev.free.fr/public/backbone/jqm/所示。如果你看一下在你的Web瀏覽器上生成的源代碼（在完成CTRL + A然後「查看源代碼」之類的東西之後），jQuery mobile成功地「編譯」了我的HTML標記，但沒有任何反應。 – econym 2013-04-25 12:51:32

好吧，我終於找到了使用觸發事件的解決方案。

我只想通過使用Backbone和jQuery Mobile在每個頁面（或模板）上使用相同的頁眉和頁腳。這實際上很簡單，但是當我研究時我錯誤了。

以下是2個簡單的應用程序;唯一的區別是在這裏：

正常應用（工作的jsfiddle：http://jsfiddle.net/QLu4P/）

app.Views.Main = Backbone.View.extend({ 
initialize : function(params) 
{ 
    // ... 
}, 

render : function() 
{ 
    // ... 
    $(this.el).html(renderedContent); 
    // ... 
}

}）;

使用jQuery移動該應用程序（工作的jsfiddle：http://jsfiddle.net/q5TX7/）

app.Views.Main = Backbone.View.extend({ 
initialize : function(params) 
{ 
    // ... 
}, 

render : function() 
{ 
    // ... 
    $(this.el).html(renderedContent).trigger('create'); 
    // ... 
}

}）;

我剛剛在$(this.el).html(renderedContent)上加了.trigger('create')！我特意將2個應用程序上的jQuery Mobile標籤放在一起，以突出顯示這幾乎是相同的代碼。

希望它會有用。

來源

2013-04-25 16:31:32 econym

Backbone和jQuery Mobile：所有頁面上的相同標題

回答

相關問題