Question

我是骨干下划线和require.js的新手。我跟着this tutorial使用backbone.js和underscore.js创建了一个项目。

然后我想将require.js添加到该项目中。这是我在theater.html中修改的内容：

<body>
<h1>My Theater</h1>
<script src="libs/require.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>   

    <div id="mainContainer"></div>

    <input type="button" value="Add Item" id="butAddItem" />

    <script type="text/template" id="tmplt-Movies"> 
        <ul>
        </ul>
    </script>
    <script type="text/template" id="tmplt-Movie">
        <div>*******************************************************</div>
        <div><%= Id %> </div>
        <div><%= Name %> </div>
        <div><%= AverageRating %> </div>
        <div><%= ReleaseYear %> </div>
        <div><%= Url %> </div>
        <div><%= Rating %> </div>
    </script>
</body>

我在main.js文件中添加了几行代码：

require.config({ 
   paths: { 
     jquery: 'libs/jquery-1.7.1', 
     underscore: 'libs/underscore', 
     backbone: 'libs/backbone' 
} });

然后我遇到了2个错误：

1. ReferenceError: Backbone is not defined , Theater.Models.Movie = Backbone.Model.extend({});

这是main.js文件： require.config（{ 路径：{ jquery：'libs / jquery-1.7.1'，下划线：'libs / underscore'，骨干：'libs / backbone' }};

 var Theater = {
   Models: {},
   Collections: {},
   Views: {},
   Templates:{}
  };


  Theater.Models.Movie = Backbone.Model.extend({});


  Theater.Collections.Movies = Backbone.Collection.extend({
     model: Theater.Models.Movie,
     url: "data/movies.json",
     initialize: function(){
     console.log("Movies initialize");
   }
  });

  Theater.Templates.movies = _.template($("#tmplt-Movies").html());

  Theater.Views.Movies = Backbone.View.extend({
     el: $("#mainContainer"),
     template: Theater.Templates.movies,
     //collection: new Theater.Collections.Movies(), //Not needed

     initialize: function () {
       //_.bindAll(this, "render", "addOne", "addAll");
       this.collection.bind("reset", this.render, this);
       this.collection.bind("add", this.addOne, this);
      },

      render: function () {
        console.log("render");
        console.log(this.collection.length);
        $(this.el).html(this.template());
        this.addAll();
     },

    addAll: function () {
      console.log("addAll");
      this.collection.each(this.addOne);
    },

    addOne: function (model) {
       console.log("addOne");
       view = new Theater.Views.Movie({ model: model });
       $("ul", this.el).append(view.render());
    }

   });


  Theater.Templates.movie = _.template($("#tmplt-Movie").html());
  Theater.Views.Movie = Backbone.View.extend({
  tagName: "li",
  template: Theater.Templates.movie,
  //events: { "click .delete": "test" },

  initialize: function () {
      //_.bindAll(this, 'render', 'test');
      this.model.bind('destroy', this.destroyItem, this);
      this.model.bind('remove', this.removeItem, this);
  },

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

  removeItem: function (model) {
    console.log("Remove - " + model.get("Name"));
    this.remove();
  }
 });


Theater.Router = Backbone.Router.extend({
routes: {
    "": "defaultRoute"  //http://localhost:22257/Theater/theater.htm
},

defaultRoute: function () {
    console.log("defaultRoute");
    Theater.movies = new Theater.Collections.Movies();
    new Theater.Views.Movies({ collection: Theater.movies }); //Add this line
    Theater.movies.fetch();
    console.log(Theater.movies.length);
}
});

var appRouter = new Theater.Router();
Backbone.history.start();

//This is a hack for demonstration  purposes
$("#butAddItem").click(null, function () {
    var movie = new Theater.Models.Movie(
    {
        "Id": "BVP3s",
        "Name": "Lord of the Rings: The Return of the King: Extended Edition: Bonus Material",
        "AverageRating": 4.3,
        "ReleaseYear": 2003,
        "Url": "http://www.netflix.com/Movie/Lord_of_the_Rings_The_Return_of_the_King_Extended_Edition_Bonus_Material/70024204",
        "Rating": "PG-13"
     }
  );

  Theater.movies.add(movie);
  console.log(Theater.movies.length);
});

我不知道如何转换main.js并创建app.js文件以使用require.js.

请知道。

非常感谢你。

Answer 1

...首先

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

可能是

<script src="libs/require.js" data-main="main.js" type="text/javascript"></script>

其次

require.config({
    baseUrl: '.',
    shim: {
        'backbone': {
            deps: ['underscore'],
            exports: 'Backbone'
        }
    },
    deps: ['backbone','jquery'],
    paths: { 
        jquery: 'libs/jquery-1.7.1', 
        underscore: 'libs/underscore', 
       backbone: 'libs/backbone' 
    }
});

require(['app']);

最后将你的app.js包装在一个define中。

define(function () {

    Theater.Models.Movie = Backbone.Model.extend({});


    Theater.Collections.Movies = Backbone.Collection.extend({
        model: Theater.Models.Movie,
        url: "data/movies.json",
        initialize: function () {
            console.log("Movies initialize");
        }
    });

    Theater.Templates.movies = _.template($("#tmplt-Movies").html());

    Theater.Views.Movies = Backbone.View.extend({
        el: $("#mainContainer"),
        template: Theater.Templates.movies,
        //collection: new Theater.Collections.Movies(), //Not needed
        initialize: function () {
            //_.bindAll(this, "render", "addOne", "addAll");
            this.collection.bind("reset", this.render, this);
            this.collection.bind("add", this.addOne, this);
        },

        render: function () {
            console.log("render");
            console.log(this.collection.length);
            $(this.el).html(this.template());
            this.addAll();
        },

        addAll: function () {
            console.log("addAll");
            this.collection.each(this.addOne);
        },

        addOne: function (model) {
            console.log("addOne");
            view = new Theater.Views.Movie({
                model: model
            });
            $("ul", this.el).append(view.render());
        }

    });


    Theater.Templates.movie = _.template($("#tmplt-Movie").html());
    Theater.Views.Movie = Backbone.View.extend({
        tagName: "li",
        template: Theater.Templates.movie,
        //events: { "click .delete": "test" },
        initialize: function () {
            //_.bindAll(this, 'render', 'test');
            this.model.bind('destroy', this.destroyItem, this);
            this.model.bind('remove', this.removeItem, this);
        },

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

        removeItem: function (model) {
            console.log("Remove - " + model.get("Name"));
            this.remove();
        }
    });


    Theater.Router = Backbone.Router.extend({
        routes: {
            "": "defaultRoute" //http://localhost:22257/Theater/theater.htm
        },

        defaultRoute: function () {
            console.log("defaultRoute");
            Theater.movies = new Theater.Collections.Movies();
            new Theater.Views.Movies({
                collection: Theater.movies
            }); //Add this line
            Theater.movies.fetch();
            console.log(Theater.movies.length);
        }
    });

    var appRouter = new Theater.Router();
    Backbone.history.start();

    //This is a hack for demonstration  purposes
    $("#butAddItem").click(null, function () {
        var movie = new Theater.Models.Movie({
            "Id": "BVP3s",
            "Name": "Lord of the Rings: The Return of the King: Extended Edition: Bonus Material",
            "AverageRating": 4.3,
            "ReleaseYear": 2003,
            "Url": "http://www.netflix.com/Movie/Lord_of_the_Rings_The_Return_of_the_King_Extended_Edition_Bonus_Material/70024204",
            "Rating": "PG-13"
        });

        Theater.movies.add(movie);
        console.log(Theater.movies.length);
    });

});

您可以通过Bower切换backbone-amd的骨干版本，这是与AMD兼容的版本，并使用Lodash代替Underscore。最重要的是，您应该开始考虑将骨干模型，集合，视图和路由器抽象为单独的文件。

希望这有帮助。

如何在我的骨干项目中使用require.js

1 个答案: