试图找到一种优雅的方式来处理 jsViews 模板中双向数据绑定属性上的验证客户端。作为参考示例，请在此处查看 jsView 的 API 链接中的 jsViews 双向绑定的 PI 文档：http://www.jsviews.com/#jsvplaying。
我想在使用新值更新视图之前更新属性时验证“名称”。任何示例/指导/想法将不胜感激！
谢谢，
【问题讨论】：
标签： javascript jquery validation templates jsviews
现在 jsviews.com 上有许多示例展示了一种验证方法。
【讨论】：
试试parsleyjs。这是一个非常易于使用的 javascript 库，用于进行各种验证。
【讨论】：
我找到了我正在寻找的答案。我使用的版本在使用 $.observable 和/或更新属性时没有取消方法。解决方法：
当我在modal中更改属性的设置时，我设置了一个全局属性，让onBeforeChange事件返回false。然后我对用户输入的新值进行验证。如果它通过验证，然后我通过 observable、setProperty 更新它，然后关闭全局设置。这允许投标在视图中相应地更新，但在验证发生之前不会更新。
一个例子，简单的例子，可以在下面找到
<table><tbody id="pageList"></tbody></table>
//template for the table
<script id="pageTmpl" type="text/x-jsrender">
{^{for pages}}
<tr>
<td data-link="name"></td>
<td>
<input data-link="name" class="page-names"/>
</td>
<td>
<button id="save" class="saveCmd">Save</button>
<button id="cancel" class='cancelCmd'>Cancel</button>
</td>
</tr>
{{/for}}
</script>
还有 javascript 来推送它：
var isModal = true;
$.views.helpers({
onBeforeChange: function(ev, data)
{
//this would be global setting if in a modal
if(isModal)
{
return false;
}
},
onAfterChange: function (ev, data)
{
//this would be global setting if in a modal
if(isModal)
{
return false;
}
}
});
$(document).ready(function(){
//not used at moment!!!
$(".saveCmd").on("click", function(){
var dataItem = $.view(this).data,
newVal = $(this).parent().parent().find('input').val();
//validate newValue
if(!ValueIsValid(newVal))
{
alert("Must be 10 characters or less!");
}
else
{
isModal = false;
$.observable(dataItem).setProperty("name", newVal);
isModal = true;
}
});
$(".cancelCmd").on("click", function(){
var dataItem = $.view(this).data;
$(this).parent().parent().find('input').val(dataItem.name);
});
});
//KETHCUP VALIDATION FUNCTION mock example
function ValueIsValid(val)
{
return val.length < 11;
}
//variables and setup for initial objec.
var myTemplate = $.templates("#pageTmpl");
var pages = [
{
name: "Q100"
},
{
name: "Q200"
}
];
var app = {
pages: pages
};
var counter = 1;
myTemplate.link("#pageList", app);
小提琴演示链接：http://jsfiddle.net/Duj3F/171/
【讨论】：
这个问题是通过返回 false 来解决的，在 jsViews 中触发“onBeforeChange”事件。因此，我们有一个开关，如果触发了验证，该开关就会打开，并且不允许对绑定的元素进行更新。一旦验证被修复，我们就关闭该开关，并且“onBeforeChange”运行。我对这个问题的困惑表示歉意，但需要解决方案的问题不是验证，而是如何中断 jsViews 以两种方式绑定更新数据绑定对象。感谢大家的帮助！
【讨论】：