0

私はそれらのセッションを手に入れました：

Session.set("group_name",false);
Session.set("group_date",false);
Session.set("group_friends",false);
Session.set("group_location",false);
Session.set("group_rules",false);
Session.set("group_desc",false);
Session.set("group_save",false);

width プロパティのみを変更する必要があるブートストラップ プログレス バーを使用しています。Session.get に似たアクションを実現しようとしています。つまり、これらのセッションのいずれかで何かが変更されたかどうかを確認して、プログレス バーの幅を増やしたいと考えています。私はそのようなことを試みました：

Meteor.render(function(){
    prog = 0 ;
    prog = prog;
    for( var i in Session.keys){
        if(Session.keys.hasOwnProperty(i) && Session.keys[i] != "false"){
            prog  = prog + 1*15;
        }
    }
    return console.log(prog);
});

私のHTML：

<div class="bar" style="width: {{prog}}%;">

それはうまくいきません。私は何かが欠けていますが、何がわかりません。

4

1 に答える 1

2

私は に精通しているわけではありませんMeteor.renderが、ドキュメントからは、DOM に追加する必要があるリアクティブ フラグメントが返されます。それが機能しない理由だと思います。Meteor.renderそうは言っても、実際に直接呼び出す必要はありません(おそらくこれまで)。テンプレートとヘルパーだけでこれを行うことができます。完全な動作例を次に示します。

test.html

<body>
  {{> test}}
</body>

<template name="test">
  <div id='progress-wrapper'>
    <div id='progress' style='width: {{progress}}%;'></div>
  </div>
</template>

test.js

var PROGRESS_VARS = ['group_name', 'group_date', 'group_friends',
'group_location', 'group_rules', 'group_desc', 'group_save'];

Template.test.created = function() {
  _.each(PROGRESS_VARS, function(p) {
    Session.set(p, false);
  });
};

Template.test.helpers({
  progress: function() {
    var total = 0;
    var length = PROGRESS_VARS.length;

    _.each(PROGRESS_VARS, function(p) {
      if (Session.get(p)) {
        total += 1;
      }
    });

    return Math.ceil(100 * total / length);
  }
});

test.css

#progress-wrapper {
  border: 1px solid #000;
  margin-top: 50px;
  width: 50%;
}
#progress {
  background-color: #008000;
  height: 50px;
}
于 2013-10-20T20:11:32.620 に答える