【问题标题】:How to properly structure a KnockoutJS application如何正确构建 KnockoutJS 应用程序
【发布时间】:2012-10-04 18:44:26
【问题描述】:

我想知道如何以正确的方式构建 KnockoutJS 应用程序。

  • 官方文档几乎总是只使用一个 ViewModel

只实现了几个功能后,我的代码变得非常混乱,并且来自面向对象的背景,我对这样的架构非常过敏。所以一定有更好的解决方案。

由于对 JavaScript 不是很有经验,我搜索了 Stackoverflow 并找到了 those three options。所以我尝试了前两个选项,但我对它们不满意:

  • 拥有多个 ViewModel,例如 here

我发现很难决定哪个 DOM 元素得到哪个 ViewModel。还有几个从 DOM 元素外部调用的函数。也许我在这种架构中使用的 ViewModel 太少,但 ViewModel 之间的通信似乎有所不同,我希望不知何故应该没有必要。那么如何正确地做到这一点呢?

  • 拥有子视图并利用with binding(来自those three的第二个选项)。

这是我首选的架构类型,因为您可以在一个视图模型之外进行文档范围的绑定,但您也可以将代码构造成子块,并使用 with 绑定将它们绑定到您想要的任何位置。这个选项虽然需要对象字面量而不是函数,正如answer 中所描述的那样。

我没有尝试过方法三,因为它看起来有点矫枉过正,而且还使用了对象字面量。

那么有没有一种方法可以在不使用对象字面量的情况下构建我的代码并完全控制?

我希望这不会太令人困惑:-P

【问题讨论】:

    标签: javascript knockout.js


    【解决方案1】:

    对于您提到的任何选项,您都不需要使用对象字面量。示例只是使用它们来简化代码。您可以选择以您认为合适的任何方式创建单独的视图模型。

    例如在#3 中,您可以使用如下构造函数:http://jsfiddle.net/rniemeyer/PctJz/149/。当然,实际数据将被传递到函数中,而不是静态的。与 #2 相同,您只需将其包装在“视图”对象中即可。

    【讨论】:

    • +1 用于在同一个示例中同时显示对象字面量和函数方式,可以更轻松地了解它们的不同之处[并意识到它们并没有太大的不同 :)]
    • 很好的例子,谢谢!我需要更新小提琴才能看到它运行 - 也许淘汰赛已经过时了? jsfiddle.net/memeLab/cy7u9/1
    • 超级有帮助,谢谢.. 我如何设置加载时的默认视图? stackoverflow.com/questions/23946248/…
    猜你喜欢
    • 2012-08-04
    • 1970-01-01
    • 1970-01-01
    • 2018-01-22
    • 2019-06-06
    • 1970-01-01
    • 1970-01-01
    • 2020-07-20
    • 1970-01-01
    相关资源
    最近更新 更多