Question

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

db＆lt; -namespace
- tabs [] - ＆gt;标签
  - ID
  - 标题
  - 型
  - items [] - ＆gt;小部件
    - ID
    - CSS
    - 厕所
    - 特定于小部件的viewModel
- 服务

如果每个小部件都是＆＃39;是一个存在于同一个标签（div）中的viewModel，我会遇到什么样的问题？

是否可以让一个viewModel从顶部开始并包含其他模型？或者我应该使用单独的模型并使用ko.applyBindings（vm，element）来应用它们？

Answer 1

我们两种方式都取得了成功，但通常我们会使用您提到的第一个方案，其中一个整体父视图模型包含其他更具体的视图模型的实例。一般做法建议避免经常调用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和查看模型，只是列出一个我们发现有用的常见例子。

对复杂的Knockout viewModel / models的建议？

1 个答案: