Javascript Backbonejs未显示此选项。已从路由器解析选项_Javascript_Backbone.js

Javascript Backbonejs未显示此选项。已从路由器解析选项

javascript backbone.js

Javascript Backbonejs未显示此选项。已从路由器解析选项,javascript,backbone.js,Javascript,Backbone.js,出于某些原因，itemDetails未分析MenuItemDetails视图中的.options。这是javascript代码： // ROUTER var AppRouter = Backbone.Router.extend({ routes: { "": "list", "menu-items/new": "itemForm", "menu-items/:item": "itemDetails" }, list: function(){ $('#a

出于某些原因，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();
});

//路由器
var AppRouter=Backbone.Router.extend({
路线：{
“：”列表“，
“菜单项/新建”：“项目表单”，
“菜单项/：项”：“项详细信息”
},
列表：函数（）{
$（'#app'）.html（'列表屏幕'）；
},
itemDetails：功能（项目）{
var view=新菜单项详细信息(
{
名称：项目，
类别：“主菜”，
imagepath:'无图像.jpg'
}
);
$（'#app'）.html（view.render（）.el）；
},
itemForm:function（）{
$（'#app'）.html（'新项目表单'）；
}
});
//观点
var MenuItemDetails=Backbone.View.extend({
render:function（）{
var标记=“”+
''+这个.选项.名称+''+
'';
这个.$el.html（标记）；
归还这个；
}
});
var app=新批准者（）；
$（函数（）{
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中的参数未解析到视图中。请在这里帮我解决这个问题。

您的路由器似乎很混乱：

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

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

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

嗯

您的路由器工作正常。这是您将数据从路由器传递到视图的方式被破坏。这是一个