Question

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

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

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

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

var docview = Backbone.View.extend({

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

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

有关如何使用Backbone Views中的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'));

骨干路由器无法正常工作

2 个答案: