8

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

  • db <-命名空间
    • 选项卡 [] -> 选项卡
      • ID
      • 标题
      • 类型
      • 项目 [] -> 小部件
        • ID
        • css
        • 私房
        • 特定于小部件的 viewModel
    • 服务

如果每个“小部件”都是存在于同一选项卡（div）中的视图模型，我会遇到什么样的问题？

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

4

1 回答 1

6

我们在这两种方式上都取得了成功，但通常我们会使用您提到的第一个场景，其中一个整体父视图模型包含其他更具体的视图模型的实例。一般做法建议避免applyBindings频繁打电话。在您的实例中快速提及淘汰赛的“with”绑定似乎是合适的：http: //knockoutjs.com/documentation/with-binding.html

这将使您的选项卡中的绑定表达式更加专注于它们所代表的视图模型：

<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 和视图模型完全取决于您自己，只需列出一个我们发现有用的常见示例。

于 2012-10-05T20:15:37.673 回答