1

編集:NoUiSliderパッケージの使用をやめたため、質問は無効になりました。以下の私の回答を参照して、これに対して私が何をしたかを確認してください。

タスクごとにライブの進行状況バーを表示しようとしています。ページに入ると、スライダーにコレクション フィールドの開始値を設定します。

現在、それも表示されません。「start:progressNow」を「start:0」に変更すると、クライアント側でのみ機能し、DB に何も保存/変更しません。

内部メソッド:

addTask: function (projectId, text, description, due, progress) {
    check(projectId, String);
    check(text, String);

    if (!this.userId) {
        throw new Meteor.Error(403, 'not-authorized');
    }

    Tasks.insert({
        text: text,
        createdAt: new Date(),
        owner: this.userId,
        username: Meteor.user().username || Meteor.user().profile.name,
        projectId: projectId,
        taskDescription: description,
        due: due,
        progress: 0
  });
},

イベントとレンダリング:

Template.task.events({
    "change .slider": function () {
        var progressVal = this.noUiSlider.value;
        Tasks.update({
            progress: progressVal
        })
    },
});

Template.task.rendered = function () {
    var progressNow = return Tasks.findOne({_id: this._id}).progress;
    this.$('.slider').noUiSlider({
      start: progressNow,
      connect: "lower",
      step: 0,
      format: wNumb({
        decimals: 0,
      }),
      range: {
        'smin': 0,
        'max': 100
      }
    });
    this.$('.slider').Link('lower').to(this.$('.range'));
};
4

1 に答える 1

2

NoUiSlider パッケージを使用する代わりに、HTML5 で作成しました。

タスクが作成されると、進行状況は自動的に 0 になります (これは基本的にタスク作成メソッドの 1 行です。

Tasks.insert({  
    //other fields
    progress: 0, 
});

シンプルな HTML - {{progress}} は単に進捗フィールドの値です。

<form>
    <input type="range" value="{{progress}}" class="progress" name="progress" min="0" max="100">
</form>
<span class="spn-btn">{{progress}}</span>

内部メソッド:

updateProgress: function(taskId, progress) {
    Tasks.update(taskId,{ 
        $set: { progress:progress} 
    });
}

テンプレート イベントの内部:

'change input[type="range"]': function (e,t) {
    var progress = e.target.value;
    Meteor.call("updateProgress", this._id, progress);
    console.log('success!');
}

乾杯。

于 2015-09-09T11:21:56.807 に答える