1

执行两次 js 脚本时遇到问题

主.js：

(function($){

Backbone.sync = function(method, model, success, error){
    success();
};

var Movie = Backbone.Model.extend({
    defaults: {title:"", year:"", plot:"", extended_plot:""}
});

var List = Backbone.Collection.extend({
    model: Movie
});

var MovieRow = Backbone.View.extend({
    tagName: 'li',

    initialize: function(){
        _.bindAll(this, 'render');
        this.model.bind('change', this.render);
    },

    render: function(){
        $(this.el).html('<span>' + this.model.get('title') + '</span>');
    }
});

var MovieList = Backbone.View.extend({
    el: $('#content'),

    initialize: function(){
        _.bindAll(this, 'render', 'appendItem', 'addItem');

        this.collection = new List();
        this.collection.bind('add', this.appendItem);

        console.log('initializing');
        this.render();
    },

    render: function(){
        console.log('rendering');
        $(this.el).append("<ol></ol>");
    },

    appendItem: function(movieObj){
        var movieView = new MovieRow({
            model: movieObj
        });
        console.log('appending');

        $('ol', this.el).append(movieView.render().el);
    },

    addItem: function(titleStr){
        var movieObj = new Movie();
        movieObj.set({title: titleStr});

        this.collection.add(movieObj);
    }

});

console.log('main');
var listView = new MovieList();     })(jQuery);

索引.php：

<!-- language: lang-html -->
<head>
    <meta charset="utf-8">
    <title><?php echo "$title: $subtitle"; ?></title>

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link href="css/default.css" rel="stylesheet" />
    <link href="css/jquery.mobile-1.1.1.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.1.1.js"></script>
    <script type="text/javascript" src="js/underscore.js"></script>
    <script type="text/javascript" src="js/backbone.js"></script>


</head>
<body>
    <div data-role="header" id="header"><h1>GREATES MOVIES OF ALL TIMES</h1></div>
    <div data-role="content" id="content">
    </div>

    <script type="text/javascript" src="js/main.js"></script>
</body>

输出：

main---------------main.js（第 64 行）

初始化-------main.js（第37行）

渲染---------main.js（第42行）

GET http:// * /main.js?_=1348774790150---200 OK---jquery.js（第8281行）

main--------------jquery.js（第 627 行）

初始化------jquery.js（第600行）

渲染---------jquery.js（第605行）

提前致谢！

4

0 回答 0