zoukankan      html  css  js  c++  java
  • ember.js:使用笔记6 子项目的前进与后退

    如下代码会根据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方法来跳转;

    
    
    
    

      

  • 相关阅读:
    Mac php使用gd库出错 Call to undefined function imagettftext()
    centos 使用 locate
    Mac HomeBrew 安装 mysql
    zsh 命令提示符 PROMPT
    新的开始
    Java 面试题分析
    Java NIO Show All Files
    正确使用 Volatile 变量
    面试题整理 2017
    有10阶梯, 每次走1,2 or 3 阶,有多少种方式???
  • 原文地址:https://www.cnblogs.com/jinkspeng/p/4017591.html
Copyright © 2011-2022 走看看