JsViews：在 'change' 上 Select 未按预期工作

Question

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

当使用 jquery 获得相同的更改值时，它会 return updated/changed 值。我对 jsviews 也有同样的期待。

数据-link {:value:}当然会两种方式更新...但最终我需要从所选选项中获取 'text' 值以使用 setProperty 更新其他地方().注意：选项包含在 {{for...}}

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

更新：

我认为 on 'click'/default 事件按预期工作...我错了。单击每个 select 和 option 时，它都会触发。我想这就是 click 的 'expected' 行为。然而...

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

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

Jquery returns 更改为值，而 Jsviews returns 为 current/previous 值。

在我看来，jsviews 没有正确处理 select 元素的 'change'？

Answer 1

事件 - change 工作正常。首先，updated DOM next update observable object。事件 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

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

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

当然可以also/alternatively直接观察数据的变化，获取之前的值和新的值，还有select元素value:

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

JsViews：在 'change' 上 Select 未按预期工作

JsViews: On 'change' with Select not working as expected

jsrender

jsviews