javascript的jface数据绑定答案

【问题标题】：jface databinding for javascriptjavascript的jface数据绑定
【发布时间】：2012-07-06 02:11:34
【问题描述】：

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

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

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

所以我问你，有没有类似于 JFace Databinding for JavaScript 的东西？

【问题讨论】：

标签： java php jquery data-binding jface

【解决方案1】：

【讨论】：

jsRender + jsViews 提供了 javascript 对象和 ui 之间的数据绑定功能，但我没有注意到任何方法可以为正在绑定的数据添加验证并根据此验证更改 UI。例如：如果用户在您期望一个数字时输入了一个字母，我想提供有关它的反馈并禁用提交按钮等。

【解决方案2】：

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

完整解决方案here

【讨论】：