流星上的反应变量

Question

我一直在寻找反应变量和依赖流星，但我今天面临的一个问题与一个对象。

目标是在页面加载后执行stepbar并显示更改。

我定义的助手Stepbar_helper.js如下：

/** 
    * stepBar 
    * 
    * Stepbar library 
    * 
    */ 
    function StepBar(){ 

     this.stepList = []; 
     this.curStep = 0; //current step 
    } 

    /* architecture of a step 
    var step = { 
     status : '', 
     title : '', 
     text : '' 
    } 
    */ 

    /** 
    * addStep 
    * 
    * Add a step to the list 
    * 
    * @param Array Properties of the step @see _props 
    */ 

    StepBar.prototype.addStep = function(properties) { 
     this.stepList.push(properties); 
    }; 

    /** 
    * clear 
    * 
    * Clear the list of the steps 
    * 
    */ 
    StepBar.prototype.clear = function() { 
     this.stepList = []; 
    }; 


    /** 
    * next 
    * 
    * Jump to the next step 
    * 
    */ 
    StepBar.prototype.next = function() { 
     if(this.curStep <= this.stepList.length){ 
      this.curStep++; 

      //change attributes of previous 
      this.stepList[this.curStep-1].status = 'complete'; 

      //set next to active 
      this.stepList[this.curStep].status = 'active'; 
     } 
    }; 

    /** 
    * getCurrent 
    * 
    * Returns the current element of the list 
    * 
    * @return Array 
    */ 
    StepBar.prototype.getCurrent = function() { 
     return (this.stepList[this.curStep] !== undefined) ? this.stepList[this.curStep] : null; 
    }; 



    this.StepBar = new StepBar(); //export 

然后，我有一个模板：

<template name="stepbar"> 

    <div class="row bs-wizard" style="border-bottom:0;"> 

     {{#each Steps}} 

      <div class="col-xs-4 bs-wizard-step {{status}}"> 
       <div class="text-center bs-wizard-stepnum">{{title}}</div> 
       <div class="progress"><div class="progress-bar"></div></div> 
       <a href="#" class="bs-wizard-dot"></a> 
       <div class="bs-wizard-info text-center">{{text}}</div> 
      </div> 


     {{/each}} 

    </div> 
</template> 

最后我有一个stepbar.js文件：

//first step 
StepBar.addStep({ 
    status : 'active', 
    title : 'Step 1', 
    text : 'Propriétés' 
}); 

StepBar.addStep({ 
    status : 'disabled', 
    title : 'Step 2', 
    text : 'Paramètres' 
}); 

StepBar.addStep({ 
    status : 'disabled', 
    title : 'Step 3', 
    text : 'Aperçu' 
}); 



Template.stepbar.helpers({ 
    Steps: function() { 
     return StepBar.stepList; 
    } 
}); 

stepbar在另一个模板中调用，在后一个模板中，当我点击一个按钮时，我正在调用方法Step Bar.next（）将当前步移到下一步。但是该模板不受影响。

我的问题是我需要包括依赖关系？我真的不知道Deps如何工作。

问候

Answer 1

您可以使用ReactiveArray创造很好的反应阵列。安装软件包：

meteor add manuel:reactivearray 

那么你应该能够用ReactiveArray对象来代替你的阵列，这样一来：

/** 
* stepBar 
* 
* Stepbar library 
* 
*/ 
function StepBar(){ 

    this.stepList = new ReactiveArray(); 
    this.curStep = 0; //current step 
} 

/** 
* clear 
* 
* Clear the list of the steps 
* 
*/ 
StepBar.prototype.clear = function() { 
    this.stepList.clear(); 
}; 

由于ReactiveArray的行为就像一个正常的数组，类的所有的休息应该像这次小小的变化一样工作。 （原谅我，如果我错了）

然后，只要确定你做你的助手反应使用list()方法：

Template.stepbar.helpers({ 
    Steps: function() { 
     return StepBar.stepList.list(); 
    } 
});