Question

我在一个名为“todo_form”的模板中有这个：

<input type="hidden" id="priority" value="{{todo.priority}}">

然后我在表单上进行了“渲染”回调设置，以从该隐藏输入中读取值，并使用它设置jQuery UI滑块。通过单击列表中的待办事项（通过已注册的会话var，“active_todo”）填充表单。

所以，如果我点击一个优先级为10的待办事项，然后点击任何其他具有相同优先级的待办事项$('#priority').val()将返回空白...只要我点击一个todo，它就可以正常工作不同的优先事项。我通过使用控制台验证了这一点 - 此字段设置为空白！

我的解决方案是检查已注册的“active_todo”并从中提取优先级，但我还必须更新隐藏的输入：$("#priority").val(active_todo.priority)。

有人有任何想法吗？这是原始（非工作）渲染的回调：

Template.todo_form.rendered = ->
    priority = $( "#priority" ).val();
    $( "#priority-slider" ).slider(
        range: "min"
        value: priority
        min: 1
        max: 10
        orientation: 'vertical'
        slide: ( event, ui ) ->
            $( "#priority" ).val( ui.value)
    )

以下是我“修复”它的方式：

Template.todo_form.rendered = ->
    active_todo = Session.get('active_todo');
    $("#priority-slider" ).slider(
        range: "min"
        value: active_todo.priority
        min: 1
        max: 10
        orientation: 'vertical'
        slide: ( event, ui ) ->
            $("#priority").val( ui.value)
    )
    $("#priority").val(active_todo.priority) # SHOULDN'T HAVE TO DO THIS!!!

Answer 1

要理解你想要完成的事情有点困难，但我相信你只想拥有一个滑块，其值显示所选ToDo项目的优先级，然后你想让它可以改变这个值用滑块。

如果是这样，那隐藏的输入确实没有必要。您真正需要的是使“当前待办事项”成为一个被动数据源。你已经拥有了你的“active_todo”Session变量。以下是我在JavaScript中建议的内容（这是完全即时且未经测试的）：

var prioComp;

Template.todo_form.rendered = function() {
  $("#priority-slider").slider({
    range: 'min',
    value: 1,
    min: 1,
    max: 10
    start: function() { 
      prioComp.stop();
    },
    stop: function(event, ui) {  
      Session.get('active_todo').priority = ui.value;
      trackPriority();
    }
  });
  trackPriority();
};

function trackPriority () {
  prioComp = Deps.autorun(function() {
    $("#priority-slider").slider('value', Session.get('active_todo').priority);
  });    
}

就像我说的那样，未经测试，所以也许这里有一两个错误，但至少要查看代码并尝试理解我正在尝试的内容。

当使用相同的值填充时，表单上的Meteor.js隐藏输入变为空白

1 个答案: