Backbone 路由器不工作

Question

我正在尝试创建一个简短的文档路由器，通过单击文档的标题可以访问文档的内容。我使用 backbone 和下划线编写了以下程序，但它不起作用！

（该程序在文档标题在浏览器上显示为列表的范围内工作）

<!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>

非常感谢任何帮助，谢谢！

Answer 1

在 docview 中检查 events。不要直接在 events 中定义点击处理程序函数，而是编写一个将事件作为视图的单独属性处理的函数，并将函数名称指定为字符串。

var docview = Backbone.View.extend({

    'events': {
        'click': 'onClicked'
    },

    onClicked: function() {
        //app logic
    } 
});

有关如何在 Backbone 视图中使用 jquery 选择器处理 DOM 事件的更多详细信息，请参阅 docs。

Answer 2

原来是以下几行错误（在docview的定义中）：

    this.$el.append(this.make('h1', null, this.model.get('title')));
    this.$el.append(this.make('div', null, this.model.get('content')));

我们可以将它们替换为以下内容，程序将正常运行：

    $('body').append("<h1>"+ this.model.get('title')+ "</h1>");
    $('body').append(this.model.get('content'));

Backbone 路由器不工作

Backbone router not working

javascript

html

backbone.js

underscore.js