ember.js:使用笔记6 子项目的前进与后退

浏览数：42 / 时间：2015年06月09日

如下代码会根据model产生不同的table项，在进行其他设置后，一般是根据id来跳转到相应项目子项中；

{{#each}}
  {{#link-to  "tabls"  this}}{{name}}{{/link-to}}
{{/each}}

这时候我们可能需要一额外的按钮而不是直接点击连接进行子项目的前进与后退，可采用如下方法：

方法1：

在对应controller内设置：

nextId : function(){
  var arrs = //获得对应子项目的content；
  var thisId = //获得当前项目的id；
  for(var idx=0; idx < arrs.length; idx++) {
    if(arrs[idx].id > thisId) break;
 }
 idx = idx < arr.length ? idx : 0; 
 return  arrs[idx].id;
} 

prevId : function(){
  var arrs = ..;
  var thisId = ..;
  for(var idx = arrs.length-1; idx >=0; idx--) {
    if(arrs[idx].id < thisId) break;
 }
 idx = idx >=0 ? : arrs.length - 1;
 return arrs[idx].id;
}

然后在相应模版中设置：

 {{#link-to "testResult" nextId}}next{{/link-to}} 
{{#link-to "testResult" prevId }}prevId{{/link-to}} 
//这里说明连接是可以通过直接使用id跳转；

方法2：

　在对应controller内设置：

nextId: function() {
    var quizs = //获取项目,
        index = quizs.indexOf(this.get("model"));
     return quizs.objectAt(index+1);
  }.property("model.id"),
  prevId: function() {
    var quizs = //获取项目,
        index = quizs.indexOf(this.get("model"));
     return quizs.objectAt(index-1);
  }.property("model.id"),

然后在模版中设置：

{{#if nextId}}
    {{#link-to "testResult" nextId}}next{{/link-to}}
{{/if}}
{{if prevId}} 
    {{#link-to "testResult" prevId }}prevId{{/link-to}} 
{{/if}}
//这里说明连接也可以通过传入对应子项目跳转；

方法3：

　在对应controller内设置：

advanceQuiz: function(delta) {
    var index,length,quizs;
    quizs = //获得项目;
    length = quizs.get("length");
    index = (quizs.indexOf(this.get("model")) + delta + length) % length;
    return this.transitionToRoute("testResult",quizs.objectAt(index));
  //这里使用transitionToRoute，注意后面的route要书写正确；
  },
 actions: {
     nextId: function() {
      return this.advanceQuiz(-1);
    },
    prevId: function() {
      return this.advanceQuiz(1);
    }
  },

然后在模版中直接设置action就可以了，这里并没有使用链接，而是使用transitionToRoute方法来跳转；

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

ember.js:使用笔记6 子项目的前进与后退