Question

我是ember.js和Web应用程序开发的新手，并且发现难以用于边缘情况的文档。

我的问题是我想使用带有ember js的jquery mobile的面板视图。不幸的是，如果放入ember view标签，面板的div标签对我来说不起作用。所以我在body标签内定义了leftpanel，rightpanel和main content div标签。然后我将ember.js的应用程序根目录设置为指向mainContent。

要填写左侧面板，我必须在应用程序根目录外手动插入一个ember视图，并为其提供一些上下文/控制器。这与预期的工作方式相同，左侧面板中填充了“mensas”列表。但是现在，如果从左侧面板激活，则显示theken-view模板的路径不起作用。如果我在应用程序视图中使用虚拟链接对其进行测试，则路由可以正常工作。

错误消息

GET http://127.0.0.1:8000/mensa/1 404 (File not found) jq.js:7845
jQuery.ajaxTransport.send jq.js:7845
...
$.mobile.changePage jquery.mobile-1.4.0.js:5577
jQuery.event.dispatch jq.js:4676
jQuery.event.add.elemData.handle jq.js:4360

的Javascript

window.Mensa = Ember.Application.create({
    rootElement: $('#application')
});

Mensa.Store = DS.Store.extend({
    adapter: DS.RESTAdapter.extend({
        host: "http://127.0.0.1:8002/api",
    })
});

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

Mensa.Mensa = DS.Model.extend({
    name:DS.attr('string'),  
    theken: DS.hasMany('theke',{ async: true })
});

Mensa.Theke = DS.Model.extend({
    name:DS.attr('string'),
    mensa: DS.belongsTo('mensa',{ async: true })
});


Mensa.Router.map(function() {
  this.route('mensa',{path:"mensa/:mensa_id"})
});

Mensa.MensaView = Ember.View.extend({
    templateName:'theken-view', 
});

Mensa.MensaRoute = Ember.Route.extend({
  model:function(params){
    return this.store.getById('mensa',params.mensa_id).get('theken')
  }
})

Mensa.MensasListView = Ember.View.extend({
    templateName:'mensa-view', 
});

Mensa.IndexRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('mensa');
  },
  setupController: function(controller, model) {
      this._super(controller, model);
      this.setupMensa();
  },
  setupMensa: function(){
    var view = Mensa.MensasListView.create({context:this.controller,controller:this.controller});
    view.replaceIn('#mensaList');
  }
});

HTML代码

<body>
  <div data-role="panel" id="leftpanel"  data-position="left">
      <div class="ui-panel-inner" id="mensaList">   
     </div>
  </div>
  <div data-role="header">
      <h1 id="mensaTitle">Title</h1>
  </div>
  <div data-role="content" id="application" class="mainContent">
  </div>
  <div data-role="panel" id="rightpanel" data-position="right">
      <div class="ui-panel-inner" >
      </div>
  </div>

<script type="text/x-handlebars">
  {{outlet}}
  <!-- This link works as intended -->
  {{#link-to 'mensa' '1'}}Link{{/link-to}}
</script>

<script type="text/x-handlebars" id="mensas" data-template-name="mensa-view">
  <ul data-role="listview"  class="ui-listview">
  {{#each model contentBinding="this"}}
      <li class="ui-li-static ui-body-inherit ui-first-child">

      <!-- This link does not work -->
      {{#link-to 'mensa' id class="ui-link-inherit"}}
        {{ name}}
      {{/link-to}}</li>
      {{else}} nooooo
  {{/each}}
  </ul>
</script>

<script type="text/x-handlebars" id="thekes" data-template-name="theken-view">
  <ul data-role="listview"  class="ui-listview">
  {{#each model contentBinding="this"}}
      <li class="ui-li-static ui-body-inherit ui-first-child">{{ name}}</li>
      {{else}} nooooo
  {{/each}}
  </ul>
</script>

</body>

Answer 1

由于您使用的是location: 'history'，因此您必须使用某些内容来劫持链接。

它对Ember有效的原因是他们劫持了链接上的点击并取代了历史状态。

您可以使用history.pushState替换页面而无需重新加载。

如果包含链接标记的视图位于ember.js中的应用程序视图之外，则使路由工作

1 个答案: