Как использовать браузеру, чтобы связать базовое приложение?

У меня проблемы с браузером.

Цель

Я пытаюсь создать базовое одностраничное приложение TodoMVC с Backbone, только вместо кучи тегов <script> в моем index.html, я пытаюсь связать их все с помощью браузера.

Вот что я до сих пор.

Lib/модели/todo.js

var backbone = require("backbone");

var Todo = module.exports = backbone.Model.extend({

  defaults: function() {
    return {
      title: "",
      completed: false,
      createdAt: Date.now(),
    };
  },

});

Lib/коллекции/todo.js

var backbone     = require("backbone"),
    LocalStorage = require("backbone.localstorage");

var TodoCollection = module.exports = backbone.Collection.extend({

  localStorage: new LocalStorage('todomvc'),

});

Библиотека /app.js

var Todo            = require("./models/todo"),
    TodoCollection  = require("./collections/todo");

(function(global) {

  global.todoCollection = new TodoCollection([], {model: Todo});

})(window);

Чтобы построить мой пакет, я использую

browserify lib/app.js > js/app.js

Наконец, мой index.html довольно прост

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Todo MVC</title>
  </head>
  <body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="/js/app.js"></script>
  </body>
</html>

Проблема

Когда я открываю консоль и пытаюсь запустить эту команду

todoCollection.create({title: "My first todo"});

Я получаю сообщение об ошибке

"Невозможно прочитать свойство" Отложено "undefined"

StackTrace

TypeError: Cannot read property 'Deferred' of undefined
    at Backbone.LocalStorage.sync.window.Store.sync.Backbone.localSync (http://localhost:4000/js/app.js:182:47)
    at Backbone.sync (http://localhost:4000/js/app.js:255:40)
    at _.extend.sync (http://localhost:4000/js/app.js:1773:28)
    at _.extend.save (http://localhost:4000/js/app.js:1979:18)
    at _.extend.create (http://localhost:4000/js/app.js:2370:13)
    at <anonymous>:2:16
    at Object.InjectedScript._evaluateOn (<anonymous>:580:39)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:539:52)
    at Object.InjectedScript.evaluate (<anonymous>:458:21)

Вопрос

Я немного поработал над тем, как прокручивать базовые приложения, но я мало что нашел в отношении вещей, которые соответствуют моей цели.

Как я могу связать одностраничное базовое приложение с одним app.js, которое может потребоваться в html?

В качестве стороннего

Я не уверен, правильно ли включаю jQuery. Является ли Backbone проблем с подключением себя к jQuery, если он также не является частью моего браузера?

Приветствуются любые советы.

Ответ 1

Edit:

Самая последняя версия jquery распространяется и используется через npm! Это делает использование jquery упрощенным браузером.

Все, что нам нужно сделать, это установить пакеты:

npm install jquery backbone

И потребуются модули:

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

Старый ответ:

Я успешно использовал jquery-browserify модуль.

Выполнить npm install jquery-browserify backbone

Создание модуля просмотра в файле с именем app-view.js:

var Backbone = require('backbone');
var $ = require('jquery-browserify');
Backbone.$ = $;

module.exports = Backbone.View.extend({
  initialize: function(){
    this.render();
  },

  render: function(){
    console.log('wuuut')
    $('body').prepend('<p>wooooooooooooooo</p>');
  }
});

Использование модуля:

var AppView = require('./app-view')

var appView = new AppView();

Вы можете сохранить jquery в теге script, как в своем коде, вместо использования jquery-браузера, но в этом случае вместо этого:

var $ = require('jquery-browserify');
Backbone.$ = $;

Я бы сделал это:

var $ = Backbone.$ = window.$;

Ответ 2

Так как jQuery v2, он способен отображать себя как module.exports. То есть вы можете установить модуль jquery вместо того, чтобы что-то вроде jquery-browserify.

npm install jquery backbone

Но по-прежнему необходимо исправить свойства Backbones $ вручную.

var backbone = require('backbone')
backbone.$ = require('jquery')

Ответ 3

Это проблема с jQuery на 100%. Ошибка: Невозможно прочитать свойство "Отложено" undefined. Где должна быть отсрочка? В jQuery (http://api.jquery.com/jQuery.Deferred/). Здесь это конкретная строка, которая вызывает ошибку: https://github.com/jeromegn/Backbone.localStorage/blob/master/backbone.localStorage.js#L145. Просто выполните Backbone.$ = window.$, когда вам понадобится магистраль в первый раз, и она будет работать.