当我通过jQuery从外部更新输入字段时，jsRender对象未更新在旧版本中工作

问题描述

我想从外部（通过jQuery）更新输入字段，并且我希望关联的对象也能更新，就像我只是手动在输入字段中键入值一样。

这是我的html：

<div id="content"></div>    
<button id="btn">Put "Hello" in content.</button>

这是我的模板：

<script id="myTmpl" type="text/x-jsrender">
<div><input type="text" id="title" data-link="{:Title trigger=true:}" /></div>
</script>

这是我的代码：

<script type="text/javascript">
obj = { Title: 'hey' }
var tmpl = $.templates('#myTmpl');
tmpl.link('#content',obj);

$('#btn').click(function() {
    $('#title').val('Hello').change();
});
</script>

问题是当我按下按钮时，该值正确进入了输入字段，但是对象（obj）没有更新（当我在调试器中观看它时）。当我直接在输入字段中输入value时，对象将正确更新。什么是正确的方法？

有趣的是，直到我将jsViews版本从0.9.71更改为1.0.7之前，它一直可以正常工作。

以下是0.9.71版：https://jsfiddle.net/zhsmn1eg/ 这是带有1.0.7的版本：https://jsfiddle.net/zhsmn1eg/1/

解决方法

行为上的差异是因为早期版本在change上监听了keydown或<input>事件，以触发可观察到的数据更改。随后HTML5 input event变为可用，并且是响应<input>值的任何更改的首选事件。更高版本的JsViews使用input事件。

呼叫$('#title').val('Hello').change();将引发change事件，但不会引发input事件。

您可以使用以下方法直接引发input事件：

$('#title').val('Hello').trigger('input');

或者，您可以全局或本地设置trigger to false。然后，对$('#title').val('Hello').change();的调用将触发数据更新。（但是现在输入内容只会在blur / change上触发数据更新，而不会在keydown上触发数据更新。）

javascript jsrender jsviews