Question

我在使用ember.js指定路由器的location属性时遇到了一些问题。我有以下代码，如果我没有将App.Router的位置设置为'history'，则可以使用。当我设置它时，当它试图加载页面时，控制台显示以下错误：未捕获错误：没有路由匹配URL'/ test /' - 其中/ test /是我的/ var / www /中的目录。这是代码：

app.js

window.App = Em.Application.create({
title: 'Title'
});


App.ApplicationView = Ember.View.extend({
  templateName: 'application'
 })

 App.ApplicationController = Ember.Controller.extend({
   name: 'test'
 })

 App.IndexAboutView = Ember.View.extend({
   templateName: 'index/about'
 })

 App.IndexAboutController = Ember.Controller.extend({
    str: 'my string'
 })

 App.IndexBioView = Ember.View.extend({
   templateName: 'index/bio'
  })

  App.IndexBioController = Ember.Controller.extend({
    str: 'bio text'
 })

 App.Router.reopen({
  location: 'history'
 });

 App.Router.map(function(match){
  this.resource('index', { path: '/' }, function() {
    this.route('about');
    this.route('bio');
   })
  })

我的索引文件如下：

   <script type="text/x-handlebars" data-template-name="application">


        <div class="navbar navbar-fixed-top">

            <div class="navbar-inner">

                <div class="container">
                    <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <div class="brand">
                          {{#linkTo "index"}}{{unbound App.title}}{{/linkTo}}   
                    </div>
                    <div class="nav-collapse navbar-responsive-collapse collapse">
                        <ul class="nav">
                            <li><a href="#">a</a></li>
                            <li><a href="#">b</a></li>
                            <li><a href="#">c</a></li>
                        </ul>

                    </div>
                </div>
            </div>
        </div>

        <div class="container">
          {{outlet}}
        </div>
    </script>

    <script type="text/x-handlebars" data-template-name="index/about">
      This is the str from about : {{str}}
    </script>

    <script type="text/x-handlebars" data-template-name="index/bio">
      This is the str from bio : {{str}}
    </script>

Answer 1

尝试在路由器上设置rootURL属性。类似的东西：

App.Router = Ember.Router.extend({
  rootURL: '/test',
  location: "history"
});

告诉路由器在浏览器历史记录中从哪里开始它的相对路径。

Answer 2

添加/测试/到您的索引路径，我添加了一个工作示例here而不是/ test /我必须匹配jsbin的默认根网址，即/iyexuf/3/edit

App.Router.map(function(match){
  this.resource('index', { path: '/test/' }, function() {
    this.route('about');
    this.route('bio');
   })
  })

我添加了一个关于about和bio的链接来说明三个部分之间的导航（标题，关于，生物）

{{#linkTo "index.about"}}About{{/linkTo}}   
{{#linkTo "index.bio"}}Bio{{/linkTo}}

Answer 3

这对我有用：

App.Router.reopen({
  location: 'history'
})

其中App是我的应用常量名称，它出现在App.Router.map ...

之前

Ember位置'历史'pre4正确的方式

3 个答案: