jface databinding for javascript


jface databinding for javascript

我是一名Java开发人员。我在大多数项目中使用 SWT 和 JFace 数据绑定。最近,我的任务是从事一种涉及PHP的不同类型的项目。我需要在服务器端使用 PHP 和在客户端使用 JavaScript 开发一个 Web 应用程序。到目前为止,我正在使用jQuery来完成所有的工作。jQuery很好,但还不够好,无法提供快速构建Web界面所需的所有管道。

在桌面应用程序中,JFace 数据绑定提供了将小部件、表单、标签绑定到模型的所有功能,允许您将表单的内容同步到对象,验证表单的内容并提供内容是否正常的反馈。

例如:对于文本字段,您可以将文本值绑定到对象的属性。添加验证以检查文本值是否为空。如果为空,则显示工具提示,要求用户输入值并禁用提交按钮。

所以我在问你,有没有类似于 JavaScript 的 JFace 数据绑定?

  1. http://visualstudiomagazine.com/articles/2012/02/01/2-great-javascript-data-binding-libraries.aspx

  2. http://uberpwn.wordpress.com/2010/10/10/databinding-js-objects-into-html-forms-with-jquery-datalink-and-jquery-tmpl/

  3. http://blogs.claritycon.com/blog/2011/02/mvvm-databinding-javascript-with-knockout-html5-boilerplate/

现在支持数据绑定的现代组件是 angular、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));

完整的解决方案在这里