11

browserifyで少し問題が発生しています。

目標

私は基本的な 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/collections/todo.js

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

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

  localStorage: new LocalStorage('todomvc'),

});

lib/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"});

エラーが発生する

「未定義のプロパティ 'Deferred' を読み取ることができません」

スタックトレース

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を適切に組み込んでいるかどうかもわかりません。バックボーンがブラウザ化されたバンドルの一部でない場合、バックボーンは jQuery に接続するのに問題がありますか?

どんなヒントでも大歓迎です。

4

3 に答える 3

14

編集：

jquery の最新バージョンは npm 経由で配布され、使用できます。これにより、jquery を browserify で簡単に使用できます。

あとは、パッケージをインストールするだけです。

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-browserify を使用するのではなく、コードのようにスクリプト タグに jquery を保持できますが、その場合は次のようになります。

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

私はこれを行います：

var $ = Backbone.$ = window.$;
于 2013-11-16T08:28:37.610 に答える
3

jQuery v2以降、それ自体を として公開できmodule.exportsます。つまり、jqueryのようなものの代わりにモジュールをインストールできますjquery-browserify。

npm install jquery backbone

$ただし、Backbonesプロパティを手動で修正する必要があります。

var backbone = require('backbone')
backbone.$ = require('jquery')
于 2014-01-20T17:13:45.430 に答える