JsViews：在“更改”时选择不按预期工作

Question

<select class="updateValueJQ" data-link="{:value:} {on 'change' ~updateValue value}"> 未按预期工作，返回以前的值，而不是更新/更改的值。

当使用 jquery 获取相同的更改值时，它会返回更新/更改的值。我对 jsviews 的期望也一样。

数据链接{:value:} 当然会更新两种方式...但最终我需要从所选选项中获取“文本”值，以使用 setProperty() 在其他地方更新。注意：选项包裹在 {{for...}}

可以在这里查看问题：https://jsfiddle.net/alnico/h50jyd7o/

更新：

我认为on 'click'/default 事件按预期工作......我错了。 当select 和option 被点击时，它都会触发。我想这是click 的“预期”行为。不过……

当传递给助手时，select 按钮返回当前值...然后当单击option 时返回更改的值。这不好，因为该函数必须忽略对select 的第一次点击。

所以，添加到我上面的原始帖子...change 触发 1 次，一旦按预期选择了 option，但是...

Jquery 返回更改后的值，而 Jsviews 返回当前/上一个值。

在我看来，jsviews 没有正确处理 select 元素的“更改”？

Answer 1

事件 - change 工作正常。首先，更新 DOM 下一个更新 observable 对象。事件 change 发生在 DOM 更改的那一刻（在更新可观察对象之前），因此该对象是不可变的。

从{on 'change' ~updateValue } 中删除value 然后dom 事件本身将消失在函数中。

你可以这样得出结论：

$(e.currentTarget).val()

您的处理程序将如下所示：

        $.views.helpers({
            updateValue: function(e) {
                console.log('jsv = ' + $(e.currentTarget).val());
            }
        })

jsfiddle example

Answer 2

是的，科德是正确的。您传递的 value 参数是更改事件期间尚未更新的数据值。如果你愿意，你仍然可以传递它，但它是以前的值：

updateValue: function(previousValue, ev) {
    console.log('jsv = ' + ev.target.value);
}

或者，不要使用 onChange 处理程序，而是使用转换器：

<select data-link="value convertBack=~updateValue">

updateValue: function(value) {
    console.log('jsv = ' + value);
    return value;
}

当然，您也可以/或者直接观察数据变化，并获取以前的和新的值，以及选择元素value：

$.observe(data, "value", function(ev, eventArgs) {
    console.log('obs = ' + eventArgs.oldValue + "->" + eventArgs.value + " target " + ev.target.value);
});