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

Question

我想在外部更新输入字段（通过 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) 未更新（当我在调试器中查看它时）。当我直接在输入字段中键入值时，对象会正确更新。这里的正确方法是什么。

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

这是一个 0.9.71 版本：https://jsfiddle.net/zhsmn1eg/ 这是 1.0.7 的版本：https://jsfiddle.net/zhsmn1eg/1/

Answer 1

行为的差异是因为早期版本在 <input> 上侦听 change 或 keydown 事件以触发可观察到的数据更改。随后 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 上的数据更新。

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

jsRender object is not updated when I update the input field externally via jQuery (was working in old version)

javascript

jsrender

jsviews