我正在尝试创建一个短文档路由器，可以通过单击文档的标题来访问文档的内容。我使用主干和下划线编写了以下程序，但它不起作用!
(程序正在运行，文档标题在浏览器上显示为列表)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title> Document Router </title>
<script src= "jquery.js"> </script>
<script src= "underscore.js"> </script>
<script src= "backbone.js"> </script>
</head>
<body>
<script type= "text/javascript">
var docs= [
new Backbone.Model({
title: 'Javascript Modules',
content: ' bbbbbbbbllllllaaaaaaahhhhhhhhhh'
}),
new Backbone.Model({
title: 'Module Systems',
content: 'Something else'
})];
var eventagg= _.extend({}, Backbone.Events);
var conview= Backbone.View.extend(
{
tagName: 'ul',
render: function()
{
_(this.collection).each(function(document)
{
this.$el.append(new doclistv({model: document}).render().el);
}, this);
return this;
}
});
var doclistv= Backbone.View.extend(
{
tagName: 'li',
events:
{
'click': function()
{
eventagg.trigger('document:selected', this.model);
}
},
render: function()
{
this.$el.html(this.model.get('title'));
return this;
}
});
var docview= Backbone.View.extend(
{
render: function()
{
this.$el.append(this.make('h1', null, this.model.get('title')));
this.$el.append(this.make('div', null, this.model.get('content')));
return this;
}
});
var docrout= Backbone.Router.extend(
{
routes:
{
'contents': 'contents',
'view/:title': 'viewdoc'
},
contents: function()
{
$('body').html(new conview({collection: docs}).render().el);
},
viewdoc: function(title)
{
var selecdoc= _(docs).find(function(document)
{
return document.get('title')===title;
});
$('body').empty().append(
new docview({model: selecdoc}).render().el);
}
});
var router= new docrout();
Backbone.history.start();
eventagg.on('document:selected', function(document)
{
var urlpath= 'view/'+ document.get('title');
router.navigate(urlpath, {trigger: true});
});
router.navigate('contents', {trigger: true});
</script>
</body>
</html>
非常感谢任何帮助，谢谢!
最佳答案
在docview中检查事件。不要直接在 events 中定义点击处理函数，而是编写一个将事件处理为 View 的单独属性的函数，并将函数名称指定为字符串。
var docview = Backbone.View.extend({
'events': {
'click': 'onClicked'
},
onClicked: function() {
//app logic
}
});
请参阅docs有关如何在 Backbone View 中使用 jquery 选择器处理 DOM 事件的更多详细信息。
关于javascript - Backbone 路由器不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28010866/