未捕获的TypeError:无法调用未定义的backbonejs的方法'navigate'

时间:2013-12-24 07:55:54

标签: javascript jquery backbone.js

我试图在eclipse中使用骨干创建一个简单的页面导航程序。我的页面是..当我点击一个按钮,它会转到特定的页面(结果)。但它会抛出错误

未捕获的TypeError:无法调用undefined backbone-min.js的方法'navigate':

<html>
<head>
    <title>Button Click</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></scr
    <script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
</head>
<body>
    <script type="text/mustache" id="scriptemplate">
        <input type="submit" class = "btn" value="Search">
    </script>    
    <div id="search_container"></div>
    <script type="text/javascript">
        buttonview = Backbone.View.extend({
            initialize: function(){
                this.render();
            },
            render: function(){
                var template = _.template( $("#scriptemplate").html(), {} );
                // Load the compiled HTML into the Backbone "el"
                this.$el.html( template );
            },
            events:{   
                "click input[type=submit]":"doSearch"
            },
            doSearch: function() {
                console.log('click event reached');
                var MyApp = new Backbone.Router();
                MyApp.navigate('/result', {trigger: true});
            }
        });
        var search_view = new buttonview({ el: $("#search_container") });
    </script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

要做的两件事:

  1. 更改您的Backbone版本。

    http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js

  2. 在此处添加此代码。

    var MyApp = new Backbone.Router();

    Backbone.history.start();

    MyApp.navigate('/ result',{trigger:true});

  3. 在文件中查看:

    http://backbonejs.org/#Router