1

我正在开发一个简单的应用程序，我使用backbone.js 进行路由，使用jQuery mobile 进行CSS。但是，每当我更改任何视图时，都不会加载 CSS。

这是我的 Index.html

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/vendor/jquery.mobile-1.3.1.min.css" />
    <title>Test App</title>
</head>
<body>
<div data-role="page" id="mainPage">
    <div data-role="header">

        <h1>App.IO</h1>
        <a href="#new" data-icon="edit" data-theme="b" class="ui-btn-right" data-role="button" data-inline="true" data-ajax="false">New</a>

        <div data-role="navbar">
        <ul>
            <li><a href="#home" data-icon="home" class="ui-btn-active" data-ajax="false">Home</a></li>
            <li><a href="#about"  data-icon="grid" data-ajax="false">About</a></li>

        </ul>
    </div>
    </div>


    <div id="main" data-role="content">

    </div>


    <div data-theme="a" data-role="footer" data-position="fixed">
    <h3>
        © Shekhar Gulati 2013
    </h3>
</div>


        <ul id="list"  data-role="listview" data-filter="true" data-filter-placeholder="Search items..." data-inset="true">

        </ul>

    </script>


    <script type="text/x-mustache-template" id="new-template">

        <form id="itemForm">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" placeholder="Enter name of item" value="">

            <label for="description">Description:</label>
            <input type="text" name="description" id="description" placeholder="Enter description" value="">
            <button type="submit" id="submit">Submit</button>
        </form>

    </script>



    <script type="text/javascript" src="js/lib/jquery.js"></script>
    <script type="text/javascript" src="js/lib/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="js/lib/underscore.js"></script>
    <script type="text/javascript" src="js/lib/backbone.js"></script>
    <script type="text/javascript" src="js/lib/backbone-localstorage.js"></script>
    <script type="text/javascript" src="js/lib/mustache.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

</body>

这是我的 app.js (function(){

var MyApp =  {};
window.MyApp = MyApp;

var template = function(name) {
    return Mustache.compile($('#'+name+'-template').html());
};

MyApp.Item = Backbone.Model.extend({

});

MyApp.Items = Backbone.Collection.extend({
    model : MyApp.Item,
    localStorage : new Store('items'),
});

MyApp.ItemsView = Backbone.View.extend({
    template : template('items'),

    initialize : function(){
            this.items = new MyApp.Items();
            this.items.fetch();
        },

        render : function(){
            this.$el.append(this.template);
            this.items.each(this.renderItem,this);
            return this;
        },

        renderItem : function(item){
            this.$('#list').append('<li><h3>'+item.get('name')+'</h3><p>'+item.get('description')+'</p></li>');
        }
});

MyApp.NewItemView = Backbone.View.extend({
    template : template("new"),

    events : {
        "click #submit" : "storeItem",
    },


    render : function(){
        this.$el.append(this.template);
        return this;
    },

    storeItem : function(event){
        event.preventDefault();
        this.collection = new MyApp.Items();
        this.collection.create({name : $("#name").val() , description : $("#description").val()});
    }

});

MyApp.Router = Backbone.Router.extend({
    initialize : function(options){
            this.el = options.el;
    },
    routes : {
        "" : "home",
        "home" : "home",
        "new" : "new",
        "about" : "about",

    },

    home : function(){
        console.log('in home() ...');
        var itemsView = new MyApp.ItemsView();
        this.el.empty();
        this.el.append(itemsView.render().el);
    },

    new : function(){
        console.log('in new()...');
        this.el.empty();
        this.el.append(new MyApp.NewItemView().render().el);
    },

    about : function(){
        console.log('in about()...');
        this.el.empty();
    },



});

var router = new MyApp.Router({el : $('#main')});
Backbone.history.start();

})(jQuery);

现在，每次我从“#home”视图移动到“#new”视图或反之亦然时，都不会应用 jQuery Mobile CSS。我还创建了一个 github 存储库，因此您也可以使用它https://github.com/shekharguati/stackoverflow-backbone-jquery-mobile-issue。

4

0 回答 0