Tha*_*you 11 javascript node.js backbone.js browserify
我在使用browserify时遇到了一些麻烦.
我正在尝试用Backbone构建基本的TodoMVC单页应用程序,而不是<script>在我的标签堆中index.html,我试图用browserify捆绑它们.
这是我到目前为止所做的事情.
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'),
});
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"});
我收到一个错误
"无法读取属性'延迟'未定义"
堆栈跟踪
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.jshtml中我可以要求的单个应用程序？
作为旁白
我不确定我是否正确包含jQuery.如果它不是我的浏览器捆绑包的一部分,Backbone是否会将自己连接到jQuery？
任何提示都非常感谢.
Set*_*ent 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保存在代码中的脚本标记中,而不是使用jquery-browserify,但在这种情况下代替:
var $ = require('jquery-browserify');
Backbone.$ = $;
我会这样做:
var $ = Backbone.$ = window.$;
| 归档时间： |
|
| 查看次数： |
9706 次 |
| 最近记录： |