gpt4 book ai didi

knockout.js - 对复杂的 knockout View 模型/模型的建议?

转载 作者:行者123 更新时间:2023-12-02 21:51:23 27 4
gpt4 key购买 nike

我有一个非常动态的网站,它在页面中使用自定义应用程序/小部件,我正在研究如何在 Knockout 的帮助下改进该网站。

  • db <-命名空间
    • 选项卡[] -> 选项卡
      • ID
      • 标题
      • 类型
      • items[] -> 小部件
        • ID
        • CSS
        • 私有(private)
        • 小部件特定的 View 模型
    • 服务

如果每个“小部件”都是存在于同一选项卡(div)中的 viewModel,我会遇到什么样的问题?

拥有一个从顶部开始并包含其他模型的 viewModel 可以吗?或者我应该有单独的模型并只使用 ko.applyBindings(vm, element) 来应用它们?

最佳答案

我们在这两种方式上都取得了成功,但通常我们会使用您提到的第一个场景,其中一个整体父 View 模型包含其他更具体的 View 模型的实例。一般实践建议避免频繁调用 applyBindings。快速提及 knockout 的“with”绑定(bind)似乎适合您的实例:http://knockoutjs.com/documentation/with-binding.html

这将使选项卡中的绑定(bind)表达式更加关注它们所代表的 View 模型:

<script type="text/javascript">
var ParentViewModel = function(){
this.tabOneViewModel = new TabOneViewModel();
this.tabTwoViewModel = new TabTwoViewModel();
}
var TabOneViewModel = function(){
this.tabOneTitle = 'Tab One';
}
var TabTwoViewModel = function(){
this.tabTwoTitle = 'Tab Two';
}
$(function(){
var parentViewModel = new ParentViewModel();
ko.applyBindings(parentViewModel,$('#main')[0]);
});
</script>
<body>
<div id="main">
<div data-bind="with:tabOneViewModel">
<div data-bind="text:tabOneTitle"></div>
</div>
<div data-bind="with:tabTwoViewModel">
<div data-bind="text:tabTwoTitle"></div>
</div>
</div>
</body>

最终,这完全取决于您想要如何构建 dom 和 View 模型,仅列出一个我们发现有用的常见示例。

关于knockout.js - 对复杂的 knockout View 模型/模型的建议?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12752817/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com