javascript - 多屏应用的两侧数据绑定(bind)javascript库使用

标签 javascript html angularjs knockout.js javascript-databinding

我是一名 C# 开发人员,我正在编写信息亭应用程序。我们的售货亭有两个屏幕。一个屏幕给客户,一个屏幕给运算符(operator)。客户可以从触摸屏输入个人信息。我想知道如何处理 html 页面中的多个屏幕。例如,我为客户和运算符(operator)创建了一个 html 页面。网页有两个文本输入,姓名和信用卡号。当客户使用屏幕键盘写一个字母时,运算符(operator)应该同时看到每个字母的“x”。我的意思是两个不同的浏览器对象和一个 html 页面。我应该用 knockout , Angular 等来处理这个问题吗?我正在使用 C# WPF mvvm 模式处理这个问题。我为两个不同的窗口对象使用一个绑定(bind)对象,mvvm 模式为我处理两侧数据绑定(bind)。

最佳答案

所以,这是一个单一问题的大主题。这两个用户(“客户”和“运算符(operator)”)有两个不同的 Web 浏览器,只请求相同的页面,对吗?服务器端是一个绑定(bind),但它是两个不同的客户端,彼此之间一无所知(除非你告诉他们)。

可以帮助您的技术是WebSockets .您基本上打开了浏览器和服务器之间的双向连接,这允许多个浏览器相互通信(通过服务器)。有真棒demos和外部案例研究。

处理 WebSockets 的一个很常见的库是 socket.io .它可以与 AngularJS ( tutorial) 以及其他任何东西一起使用。

然后按如下方式处理您的用例:

  • “客户”在他的输入字段中输入x
  • AngularJS 双向绑定(bind)更新模型
  • socket.io 连接将更新发送到服务器
  • 服务器通过 socket.io 将更新发送到所有连接的浏览器(即“运算符(operator)”)
  • “运算符(operator)”浏览器中的 socket.io 收到通知
  • 它更新 AngularJS 模型
  • 双向绑定(bind)更新 View
  • x 出现在“运算符(operator)”的屏幕上

关于javascript - 多屏应用的两侧数据绑定(bind)javascript库使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32011949/

相关文章:

angularjs - Mongo Giving 'duplicate key error' 在非唯一字段上

angularjs - 安全地将当前 $scope 从 Controller 传递给 angularjs 服务函数

html - google +1 按钮将滚动条添加到我的网站

javascript - CSS 旋转 Cube UI

javascript - 如何修改所选选项文本并在下一个选项后恢复文本

javascript - 没有返回有效的 JSON?

javascript - 如何在弹出时加载html?

javascript - 在某些州隐藏侧边栏和导航栏

javascript - AngularJS 在 URL 正下方显示列表

javascript - Css 类名不适用于 React 组件