2

我负责 Web 应用程序的开发。

我做了很多研究，最后决定用 Backbone 和 jQuery Mobile 开发这个 webapp。您当然知道，jQuery Mobile 和 BackBone 之间存在一些路由冲突。我决定使用主干路由，因此我禁用了 jQM 路由，这要归功于本教程：http ://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/ 。

我开始构建一个只有 3 个视图和一个路由器的示例应用程序（没有 jQM）。它完美地工作。您可以在此处运行此应用程序。我自愿为下一部分放置 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而 jQuery Mobile 的 div 中只有一个可变内容？

4

1 回答 1

1

好的，我终于通过使用触发事件找到了解决方案。

通过使用 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 Mobile 的应用程序（工作 jsFiddle：http: //jsfiddle.net/q5TX7/）

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

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

});

我刚刚加.trigger('create')了$(this.el).html(renderedContent)！我特意在 2 个应用程序上放置了 jQuery Mobile 标记，以强调这几乎是相同的代码。

希望它会有用。

于 2013-04-25T16:31:32.783 回答