Jquery mobile 如果包含指向标记的链接的视图在ember.js中的应用程序视图之外，则使路由工作_Jquery Mobile_Ember.js

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

jquery-mobile ember.js

Jquery mobile 如果包含指向标记的链接的视图在ember.js中的应用程序视图之外，则使路由工作,jquery-mobile,ember.js,Jquery Mobile,Ember.js,我不熟悉ember.js和web应用程序开发，发现这些文档很难用于边缘案例我的问题是，我想使用带有ember js的jquery mobile面板视图。不幸的是，如果将面板的div标记放入ember视图标记中，则该标记对我不起作用。因此，我在body标记中定义了leftpanel、rightpanel和main content div标记。然后我将ember.js的应用程序根设置为指向mainContent 为了填充左侧面板，我必须在应用程序根目录之外手动插入一个余烬视图，并为它提供一些上下

我不熟悉ember.js和web应用程序开发，发现这些文档很难用于边缘案例

我的问题是，我想使用带有ember js的jquery mobile面板视图。不幸的是，如果将面板的div标记放入ember视图标记中，则该标记对我不起作用。因此，我在body标记中定义了leftpanel、rightpanel和main content div标记。然后我将ember.js的应用程序根设置为指向mainContent

为了填充左侧面板，我必须在应用程序根目录之外手动插入一个余烬视图，并为它提供一些上下文/控制器。这就像预期的一样，左边的面板充满了“男士”列表。但是现在，如果从左侧面板激活，则显示theken视图模板的路径不起作用。如果我从应用程序视图内部使用虚拟链接对其进行测试，则路由将正常工作

错误消息

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

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

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代码

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

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


标题
{{outlet}}
{{{#链接到'mensa''1'}}链接{{/链接到}

{{{#每个模型contentBinding=“this”}

{{{#链接到'mensa'id class=“ui link inherit”}
{{name}}
{{/链接到}
{{else}}noooooo
{{/每个}}


{{{#每个模型contentBinding=“this”}
{{name}
{{else}}noooooo
{{/每个}}

由于您使用的是

位置：“历史记录”

，因此您必须使用一些东西来劫持链接

它对Ember起作用的原因是他们正在劫持链接并替换历史状态

您可以使用

history.pushState

替换页面，而无需重新加载页面。

但是mensa视图是一个余烬视图，因此它应该使用余烬路由。如果我删除位置“history”，它也不会工作。手动调用history.pushState（null，null，）；它也不起作用