在 JavaScript Web 应用程序中实现类似 SproutCore 的绑定答案

【问题标题】：Implementing SproutCore-like bindings in a JavaScript Web application在 JavaScript Web 应用程序中实现类似 SproutCore 的绑定
【发布时间】：2010-09-08 17:15:08
【问题描述】：

我已经完成了SproutCore tutorial 并且对框架必须提供的内容有所了解。看起来很神奇，虽然我不确定我对一个在幕后生成 HTML 和 CSS 的框架有什么感觉。我觉得 SproutCore 最吸引人的地方在于它的绑定——减少保持一切同步所需的胶水代码量只会是一件好事。

我有兴趣了解 SproutCore 的绑定是如何实现的。我希望能够利用绑定，而不必使用 SproutCore 等框架。

如何编写绑定数据及其表示所需的 JavaScript 代码，让视图立即反映对数据的更改而无需任何胶水代码？

【问题讨论】：

如果你不介意我问，你为什么不想要为你生成的 HTML 和 CSS？
我们中的一些人仍然回想起 Frontpage 和 Dreamweaver 的美好时光。也许从那以后情况有所改善，但我仍然会编写我自己的该死的 HTML/CSS/Javascript tyvm。
有了 SC，你实际上确实有相当多的控制权。如果您愿意，您实际上可以对 HTML/CSS 进行微观管理，而不是依赖 SC 为您做这件事。然而，SC 在管理这方面做得很好，在大多数情况下，它可以节省大量时间。然而，SC 并不是适合所有工作的工具，所以在某些情况下，您仍然应该直接编写 HTML 并混入一些 JS。
我非常喜欢 SproutCore 生成 HTML 和 CSS 的想法。在这个阶段我只是有点不安，因为框架对我来说是全新的，所以感觉就像一个神秘的黑匣子。当我了解幕后发生的事情时，我会感觉更舒服。
是的，我明白了。不幸的是，SC 文档有点缺乏。但是社区非常有帮助。试试 IRC 聊天室#sproutcore 或邮件列表：sproutcore@googlegroups.com。 SC 上还有一个新版本，应该会在不久的将来发布。

标签： javascript binding sproutcore

【解决方案1】：

使用 SproutCore，使用 SC.Observable mixin 提供的 'get' 和 'set' 方法可以实现键值观察。当你创建一个绑定时，它基本上会设置一个观察者，当它正在观察的值上调用“set”方法时触发，然后传播更改。当绑定绑定到页面上的视图时，绑定会调用必要的视图代码来对 DOM 进行更改。您可以在http://docs.sproutcore.com 上查看SC.Observable 和SC.Binding 的API 文档和源代码。

由于 SproutCore 被划分为多个“框架”，您可以只使用这个核心内容所在的框架，称为“运行时”，并在您的项目中使用它，而不需要您不使用的所有数据存储和视图层想。您也可以尝试自己重现此功能，但我想知道您是否最终不得不重现他们创建的大部分内容。

【讨论】：

很好的答案！谢谢，布鲁斯。 :)