我是Java开发人员。在大多数项目中,我都使用SWT和JFace数据绑定。最近,我的任务是从事涉及PHP的另一种项目。我需要使用服务器端的PHP和客户端的JavaScript开发一个Web应用程序。到目前为止,我正在使用jQuery来完成所有工作。 jQuery不错,但不足以提供快速构建Web界面所需的所有功能。
在桌面应用程序中,JFace数据绑定提供了将小部件,表单,标签绑定到模型的所有功能,从而使您可以将表单的内容同步到对象,验证表单的内容并在内容确定或正确时提供反馈。没有。
例如:对于文本字段,您可以将文本值绑定到对象的属性。添加验证以检查文本值是否为空。如果为空,则显示工具提示,要求用户输入值并禁用提交按钮。
所以,我想问您,与JavaScript的JFace数据绑定类似吗?
现在,支持数据绑定的现代组件是有角度的,aurelia和react(某种... + redux即将消失)。jQuery没有提供很好的数据绑定实现。它需要手动连接所有道具更改。可能实现某种观察者/订阅者方法。
或将某些组件用于数据绑定任务,该组件可提供足够方便的数据绑定定义命令。我用databindjs做的。例如
// Lets assume that there is just simple form (target)
var simpleForm = {
input: $('.simple .input-value'),
output: $('.simple .output-value')
};
// And here is the simple model object (source)
var model = {
text: 'initial value'
};
// Lets set two directional binding between [input] <-> [text]
var simpleBinding = bindTo(simpleForm, () => model, {
'input.val': 'text', // bind to user input
'output.text': 'text' // simple region that will react on user input
});
// This command will sync values from source to target (from model to view)
updateLayout(simpleBinding);
subscribeToChange(simpleBinding, () => {
$('.simple .console').html(JSON.stringify(model));
});
// Just initialize console from default model state
$('.simple .console').html(JSON.stringify(model));
完整解决方案here