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

Question

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

Zho*_*len 8 knockout.js

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

db <-namespace
- tabs [] - > tab
  - ID
  - 标题
  - 类型
  - items [] - > widget
    - ID
    - CSS
    - 有利害关系的人
    - 特定于小部件的viewModel
- 服务

如果每个"小部件"都是存在于同一个标签(div)中的viewModel,那么我会遇到什么样的问题？

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

Answer 1

Kod*_*hor 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>

Run Code Online (Sandbox Code Playgroud)

最终,完全取决于你如何构建你的dom和查看模型,只是列出一个我们发现有用的常见例子.

归档时间：	13 年，7 月前
查看次数：	3071 次
最近记录：	13 年，1 月前