1

我是主干下划线和 require.js 的新手。我按照本教程使用主干.js 和 underscore.js 创建了一个项目。

然后我想将 require.js 添加到该项目中。这是我在 theatre.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。

请有任何想法。

太感谢了。

4

1 回答 1

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(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);
    });

});

您可以切换出您的骨干版本，该版本是通过Bowerbackbone-amd提供的 AMD 兼容版本，并使用Lodash而不是 Underscore。最重要的是，您应该开始考虑将主干模型、集合、视图和路由器抽象到单独的文件中。

希望这可以帮助。

于 2013-07-01T07:26:36.280 回答