EMBER直接路由URL访问不加载数据

2024-05-23

当我直接从浏览器访问我的网址时遇到问题,它不会加载我的单一帖子信息。 示例:/index.html#/posts/10052308

但当我访问 /index.html#/posts 然后单击我的一篇文章时,它会起作用,我的网址会更改为 /index.html#/posts/10052308 并且可以工作,但如果我直接在此网址上刷新页面,则不会不再工作了。

我正在从 API (JSON) 加载数据。

在我的JS中:

App.Router.map(function() {
  this.resource('posts', function() {
    this.resource('post', { path: ':id' });
  });
});


App.Posts = Ember.Object.extend();

App.Posts.reopenClass({
  allPosts: [],
  all: function(page, sort, order){
    this.allPosts = [];
    $.ajax({
      url: 'http://intense-bastion-3210.herokuapp.com/run_sessions.json',
      dataType: 'json',
      data: "page=" + page + "&sort_by=" + sort + "&order=" + order,
      context: this,
      success: function(response){
        console.log(response);
        response.run_sessions.forEach(function(posts){
          this.allPosts.addObject(App.Posts.create(posts))
        }, this)
      }
    })
    postsList = this.allPosts;
    return this.allPosts;
  }
});

App.PostsRoute = Ember.Route.extend({
  model: function() {
  var sortColumn = Ember.computed.alias('parentController.sortedColumn');
    return App.Posts.all("1", "id", "desc");
  }
});

App.PostRoute = Ember.Route.extend({
  model: function(params) {
    return posts.findBy('id', params.id);
  }
});

在我的html中

  <script type="text/x-handlebars" id="posts">
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <table class='table'>
            <thead>
              <tr><th>Runs</th></tr>
            </thead>
            {{#each model}}
            <tr><td>
                {{#link-to 'post' this}}{{id}}{{/link-to}}
            </td></tr>
            {{/each}}
          </table>
        </div>
        <div class="span9">
          {{outlet}}
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" id="post">

    <h3>ID: {{id}}</h3>
    <h3>Sport TYPE: {{sport_type_id}}</h3>
    <h3>Start Time: {{start_time}}</h3>
    <h3>End Time: {{end_time}}</h3>
    <h3>Duration: {{duration}}</h3>
    <h3>Distance: {{distance}}</h3>
    <h3>Encoded Trace: {{encoded_trace}}</h3>

    <hr>
  </script>

这是我打开 /index.html#/posts/ 并单击任何帖子的时候https://i.stack.imgur.com/Hryge.png https://i.stack.imgur.com/Hryge.png

这是我刷新页面或直接访问的时候https://i.stack.imgur.com/ht8Bc.png https://i.stack.imgur.com/ht8Bc.png

有人可以帮我吗?


Your post路线有一个问题,它引用了一个看起来不存在的变量。

当您使用链接时它起作用的原因是提供了模型,因此它跳过模型挂钩,但是当您刷新页面时,它不再具有这种奢侈,并且必须从模型挂钩中获取模型。

就我个人而言,我很惊讶它会渲染任何东西,我猜它会爆炸并说Reference error posts is not defined.

你可能应该按照这些思路做一些事情

App.PostRoute = Ember.Route.extend({
  model: function(params) {
    return App.Posts.allPosts.findBy('id', params.id);
  }
});

or

App.PostRoute = Ember.Route.extend({
  model: function(params) {
    return this.modelFor('posts').findBy('id', params.id);
  }
});

这两个模型挂钩都取决于实际具有该属性的对象id在它们和您的路由器上使用:id作为动态段。

App.Router.map(function(){
  this.resource('posts', function(){
    this.resource('post', {path:'/:id'});
  });
});

这是一个包含所有必需元素的简单示例

http://emberjs.jsbin.com/OxIDiVU/151/edit http://emberjs.jsbin.com/OxIDiVU/151/edit

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

EMBER直接路由URL访问不加载数据 的相关文章

  • 在 Javascript 中动态添加事件处理程序

    我在使用 Javascript 时遇到了一个奇怪的问题 我得到的是一个特定格式的字符串 我将尝试用它创建一个表 该表每行只有一个单元格 字符串的格式为 每个单元格 行 需要显示内容 将传递给的参数onmouseover当用户将鼠标移动到显示
  • 防止jsTree节点选择

    我正在使用 jsTree 插件列出文件系统中的文件夹 我需要防止用户在满足特定条件之前更改到另一个节点 下面的代码不会停止传播 我看到了一些使用其他插件的解决方案 但这是一个简单的任务 没有其他插件它一定是可能的 jstree on sel
  • 根据用户区域设置过滤字符串列表

    当使用 AngularJS 1 6 处理 JavaScript 项目时 我有一个要过滤的字符串列表 例如 假设我的列表包含 rbol cig e a nido and tubo 当过滤西班牙语字符串时 如果我过滤 u 我会期望两者cig e
  • 使用 jQuery 检查输入是否为空

    我有一个表单 我希望填写所有字段 如果单击某个字段然后未填写 我想显示红色背景 这是我的代码 apply form input blur function if input text is empty this parents p addC
  • JQUERY 中用于加载 JQGRID 的选项卡

    我正在使用 jqgrid 制作网格 我想在我的应用程序中创建选项卡 单击选项卡应打开一个网格 选项卡的名称应显示在页面顶部 当我单击另一个选项卡时 它应该加载另一个网格 网格应该加载在同一页面上 并且选项卡也应该始终出现在页面上 我已经创建
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • Ember - 如何在嵌套数据对象上使用pushObject?

    由于这篇文章 我已经可以将新对象推入 jobs 和 jobProducts 数组中如何在 Ember js 中创建嵌套模型 https stackoverflow com questions 9186214 how to create ne
  • Office excel将CORS请求作为跨域请求

    我正在尝试从我的 Excel 插件发出跨域请求 正如这里所建议的 http dev office com docs add ins develop addressing same origin policy limitations http
  • 缩放事件侦听器之前的 Javascript OpenLayers

    我正在尝试将 OpenLayers 设置为在缩放开始之前不显示矢量图层 并使其在缩放结束后重新出现 我已经像这样建立了缩放结束部分 map new OpenLayers Map map element eventListeners zoom
  • 如何在每个组件完成加载后在 Angular 2 中运行 jquery 函数

    我已经尝试了所有生命周期挂钩 但无法实现所需的结果 我需要的结果是触发一个函数 该函数在加载每个元素 组件 后初始化用于单个页面上不同元素的许多 jquery 插件 假设你有这个结构 主页 滑块 小部件 产品旋转器 ETC 这些元素中的每一
  • 为什么 JSON.stringify 对于似乎具有属性的对象返回空对象符号“{}”?

    下面的例子表明JSON stringify 返回字符串 对于 SpeechSynthesisVoice 对象 var voiceObject window speechSynthesis getVoices 0 JSON stringify
  • 比较表中的行以了解字段之间的差异

    我有一个包含 20 多列的表 客户端 其中大部分是历史数据 就像是 id clientID field1 field2 etc updateDate 如果我的数据如下所示 10 12 A A 2009 03 01 11 12 A B 200
  • 覆盖函数(例如“警报”)并调用原始函数?

    我想用调用原始版本的新版本覆盖 Javascript 内置函数 类似于用调用的版本覆盖类上的方法 super有多种语言版本 我怎样才能做到这一点 例如 window alert function str do something addit
  • 获取 JSON 中的 HTML 以在 React 组件中呈现为 HTML

    试图找出如何让链接实际呈现为链接 现在 在我从 Json 文件中读取这行文本后 React 将超链接渲染为文字文本 而不将其渲染为链接 一些数据 json about John has a blog you can read a href
  • 为 Meteor 数据创建编号列表

    有没有办法获取 Meteor 集合中项目的编号列表的 编号 我知道我可以在 html 中做到这一点 但我觉得如果我可以在 spacebars 中放置一些东西 那么样式会更容易 如果我可以使用更好的术语 请告诉我 像这样的东西 前 20 部电
  • 如何查看网站浏览者的操作系统?

    我运行的是 Ubuntu 8 04 最近在访问网站时收到以下错误 请使用运行 Windows 98 2000 Me NT 或 XP 的计算机返回 www site com 网站如何知道我正在运行哪个操作系统 是仅通过 javascript
  • 限制 jQuery id 字符串吗?

    简而言之 我的问题是字符串在 jQuery 中作为可搜索 id 或可搜索内容有什么限制 更新 我得到了 ID 部分 但不是为什么我什至无法使用该字符串搜索 html 内容 对于任何愿意告诉我一个正则表达式来将模式从 MM dd yy HH
  • 在角度控制器中监听文档事件

    如何捕获角度控制器中的事件 我有文档级事件 所以我需要在角度控制器中捕获事件 这可能吗 Update 我有独立的 js 文件来处理来自相机的一些操作 document addEventListener myCameraEvent handl
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2
  • 如何在重新渲染 Ember 视图的一部分时随时运行代码?

    我的目标是拥有一个类似 Facebook 的按钮 可以有条件地出现在 Ember 视图中 我的模板是 if condition Click Like div class fb like fb edge widget with comment

随机推荐