带有选项卡式用户界面的 KnockoutJs 应用程序：最佳实践是啥？

Posted 2023-02-22

【中文标题】带有选项卡式用户界面的 KnockoutJs 应用程序：最佳实践是啥？

【英文标题】：KnockoutJs app with tabbed User Interface: What is best practice?带有选项卡式用户界面的 KnockoutJs 应用程序：最佳实践是什么？

【发布时间】：2012-10-29 07:46:35

【问题描述】：

我正在构建一个具有多标签功能的单页 KnockoutJs 应用程序。

到目前为止，我已经按照自己的基本想法尝试了 jQuery UI 的选项卡功能。

这是我的一个例子： jsfiddle

使用这个 jQuery UI 函数：

$(document).ready(function() 
$("#tabs").tabs();
);

您将如何在 Knockoutjs 应用程序中构建选项卡？有最佳做法吗？

这看起来是一个好的方向吗？或者有什么关于在哪里看的建议？

【问题讨论】：

根据要求，您可能应该考虑为每个选项卡设置单独的视图模型，如果符合要求，则再次为每个选项卡填充 ajax 调用。

或者您是否希望根据视图模型数据动态创建选项卡？

寻找这样的东西：jsfiddle.net/tyrsius/UCGRZ

@beon 这里的主要答案：link 对于拥有多个视图模型似乎是合理的。我不想动态创建标签

@Tyrsius 我不确定是否理解你的例子。好像和我的实现一样

【参考方案1】：

我建议您查看PagerJS。

PagerJS 是一个基于 KnockoutJS 和 jQuery 的 javascript 库，它提供了以声明方式创建单页应用程序的可能性 - 将子页面嵌套在子页面内，每个子页面可以独立开发，但仍可在每个子页面之间进行通信其他。

我有一个已经完成的项目，它使用 PagerJS 作为单页应用程序，它可能对您有所帮助。 KnockoutJS & Pager Example (Not completed)

希望这会有所帮助！

【参考方案2】：

看看我的绑定集合

查看GitHub 和example 链接

查看标签绑定

<div data-bind="tabs: tabs, tabsOptions:  selectedTab: selectedTabModel, enable: tabsEnabled "></div>