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

Question

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

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

目前它甚至没有出现。一旦我将 "start: progressNow" 更改为 "start:0"，它仅适用于客户端，而不会 save/change 数据库上的任何内容。

内部方法：

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

NoUiSlider getting initial value from collection field and update on change - Meteor

meteor

nouislider