Question

编辑：当我停止使用NoUiSlider包时，问题不再有效。请参阅下面的答案，看看我为此做了什么。

我正在尝试为每个任务设置一个实时进度条，当我进入页面时，我希望滑块具有来自集合字段的起始值。

目前它甚至没有显示出来。一旦我将“start：progressNow”更改为“start：0”，它只能在客户端工作，不会保存/更改数据库上的任何内容。

内部方法：

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'));
};

Answer 1

我没有使用NoUiSlider软件包，而是使用HTML5。

创建任务时，进度自动为0（基本上是任务创建方法中的一行。

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!');
}

干杯。

NoUiSlider从收集字段获取初始值并更新更新 - Meteor

1 个答案: