0

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

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

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

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

我的解决方案是检查注册的“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!!!
4

1 回答 1

1

有点难以理解您要完成的工作，但我相信您只是想要一个滑块，其值显示所选 ToDo 项目的优先级，然后您希望可以使用滑块更改此值.

如果是这样，那么隐藏的输入真的是没有必要的。您真正需要的只是使“当前待办事项”成为反应式数据源。你已经有了你的“active_todo”会话变量。这是我在 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);
  });    
}

就像我说的，未经测试，所以这里可能有一两个错误，但至少看看代码并尝试理解我正在尝试什么。

于 2013-04-05T21:20:18.430 回答