Question

使用Backbone.js模板化jQuery Mobile时遇到问题。

模板正在jQuery Mobile页面之外呈现。当我使用jquery mobile class =＆＃34; ui-listview＆＃34;进行更改时，呈现的内容与页面重叠，我无法修复它。

任何使这项工作成功的想法？

的index.html

<!DOCTYPE html>
<html> <!--<![endif] class="no-js"-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, height=device-height>

        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css"/>
        <link rel="stylesheet" href="css/new.css">


    <title>App Init</title>
    </head>
<body>



<section id="mainapp" data-role="page" class="notSelectable">   
    <header data-role="header" data-theme="b">
        <h2>Ads</h2>
    </header>

   <!-- THIS IS NOT WORKING. THE BIGGEST APPROACH IS BY USING class="ui-listview" IN THE "UL" TAG -->
    <div data-role="content">
        <ul data-role="listview" id="elem" >
        </ul>
    </div>

    <script id="personTemplate" type="text/template">
         <strong><%= status %></strong> (<%= id %>) - <%= description %>
    </script>
    <!-- END COMMENT -->


    <footer data-role="footer" data-position="fixed" data-theme="b" data-tap-toggle="false">
        <nav data-role="navbar">
            <ul>
                <li><a href="#localstorage" class="ui-btn ui-icon-recycle ui-btn-icon-notext">Refresh</a></li>
            </ul>
        </nav>
    </footer>
</section>




<section id="localstorage" data-role="page">
    <div id="loaddiv"><input type="file" class="hide" id="loadbutton" />Load</div>

     <footer data-role="footer" data-position="fixed" data-theme="b" data-tap-toggle="false">
        <nav data-role="navbar">
            <ul>
                <li><a href="#localstorage" class="ui-btn ui-icon-recycle ui-btn-icon-notext">Refresh</a></li>
            </ul>
        </nav>
    </footer>
    <div id="alert">Activate</div>
</section>




    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/underscore.js"></script>
    <script type="text/javascript" src="js/backbone.js"></script>
    <script type="text/javascript" src="js/backbone-localstorage.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
    <script type="text/javascript" src="js/appbackbone.js"></script>

</body>
</html>

appbackbone.js

var TodoItem = Backbone.Model.extend({
    defaults: {
        description: "Pick up milk", 
        status: "incomplete"
    },
    toggleStatus: function(){
        if(this.get('status') === 'incomplete'){
          this.set({'status': 'complete'});
        } else {
          this.set({'status': 'incomplete'});
        }
        this.save();        } 
});

var TodoItems = Backbone.Collection.extend({
    model: TodoItem,
    localStorage: new Backbone.LocalStorage("somekey"),

    initialize: function () {
        this.on('remove', this.hideModel, this);
    },

    hideModel: function (model) {
        model.trigger('hide');
    }

});

var TodosView = Backbone.View.extend({
    initialize: function () {
        // add new item and the view would be updated
        this.collection.on('add', this.addOne, this);
    },

    addOne: function (todoItem) {
        var todoView = new TodoView({ model: todoItem });
        this.$el.append(todoView.render().el);
    },
    addAll: function () {
        this.collection.forEach(this.addOne, this); 
    },

    render: function() {
        this.collection.forEach(this.addOne, this);
        this.addAll;
        return this;
    }
});

var TodoView = Backbone.View.extend({
    tagName: 'li',
    id: 'todo-view',
    className: 'todo',

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

    events: {

        "touchstart": "toggleStatus",
        "touchend": "toggleStatus"
    },

    toggleStatus: function () {
        this.model.toggleStatus();
    },

    remove: function(){
        this.$el.remove();
    },

    initialize: function(){
        this.render();
        this.model.on('change', this.render, this);
        this.model.on('destroy', this.remove, this);
        this.model.on('hide', this.remove, this);
    },

    render: function () {
        var attributes = this.model.toJSON();
        this.$el.html(this.template(attributes));

        return this;
    }
});


var todoItems = new TodoItems([
    {
        description: 'Jeffrey Way',
        status: "incomplete",
        id: 1
    },
    {
        description: 'John Doe',
        status: "incomplete",
        id: 2
    },
    {
        description: 'Sally Doe',
        status: "incomplete",
        id: 3
    }
]);

var todosView = new TodosView({ 
    el: $('#elem'),
    collection: todoItems
});

$(document.body).append(todosView.render().el);

Answer 1

您正在将渲染的结果附加到将其放置在您的部分之外的正文。

$(document.body).append(todosView.render().el);

应该是

todosView.render().el;

您的收藏视图已指定$ el，因此当您设置html时，它已经知道放置内容的位置，因此无需附加内容。

同样在代码的某些部分，您可以从初始化调用渲染，但也可以调用渲染。最佳做法是明确地调用它，而不是将调用放在初始化方法中。并且在你渲染的集合中，你循环遍历你的集合渲染每个项目，但他们尝试调用addAll来做同样的事情。你可以删除集合循环，只需调用所有

render: function() {

        this.addAll();
        return this;
    }

here is a code pen to show it working

jQuery Mobile中的骨干模板渲染外部页面

1 个答案: