Question

由于某种原因，itemDetails没有解析MenuItemDetails视图中的.options。这是javascript代码：

// ROUTER

var AppRouter = Backbone.Router.extend({
    routes: {
    "": "list",
    "menu-items/new": "itemForm",
    "menu-items/:item": "itemDetails"
},
list: function(){
    $('#app').html('List screen');
},
itemDetails: function(item){
    var view = new MenuItemDetails (
        {
            name: item,
            category: 'Entree',
            imagepath: 'no-image.jpg'
        }
    );

    $('#app').html(view.render().el);
},
itemForm: function(){
    $('#app').html('New item form');
}
});

// VIEWS

var MenuItemDetails = Backbone.View.extend({
    render: function(){
    var markup = '<div>' +
    '<h1>'+this.options.name+'</h1>' +
    '</div>';

    this.$el.html(markup);
    return this;
}
});

var app = new AppRouter();

$(function() {
Backbone.history.start();
});

html代码是：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>    
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

<script src="js/views/menuitemdetails.js"></script>
<script src="js/app.js"></script>

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div class="container">
  <h1>Off the Backbone</h1>
    <ul class="nav nav-pills">
        <li><a href="#">Food</a></li>
        <li><a href="#/menu-items/new">Add Item</a></li>
        <li><a href="#/menu-items/garden-salad">Garden Salad</a></li>
    </ul>
  <div class="container" id="app">

  </div>
</div>
</body>
</html>

正如您所看到的，两个第一个链接运行良好，但第三个链接正在获取一个错误，该错误告诉itemDetails中的参数未被解析为视图。请帮我这个。

Answer 1

您的路由器工作正常。这是将数据从路由器传递到视图中的方式。这是working jsfiddle: http://jsfiddle.net/somethingkindawierd/rEa88/

相关的变化正在定义模型

var MenuItemModel = Backbone.Model.extend();

然后将其传递到视图

    var view = new MenuItemDetails ({
        model: new MenuItemModel({
            name: item,
            category: 'Entree',
            imagepath: 'no-image.jpg'
        })
    });

然后在渲染时使用模型

'<h1>'+this.model.get('name')+'</h1>'

Answer 2

您的路由器似乎令人困惑：

    "menu-items/new": "itemForm",
    "menu-items/:item": "itemDetails"

根据此映射，以下两个链接都将映射到itemDetails方法：

    <li><a href="#/menu-items/new">Add Item</a></li>
    <li><a href="#/menu-items/garden-salad">Garden Salad</a></li>

正确的方法是将路由器更改为只处理一条路由，如下所示：

"menu-items/:item": "wrapper"

并在包装器中正确处理逻辑：

wrapper: function(item){
if(item === 'new'){
//handle new
} else {
//handle everything else
}

HTH！

Backbonejs没有显示从路由器解析的this.options

2 个答案: