多个ViewModel的最佳实践 [英] Best Practice with Multiple ViewModels

问题描述

我有一个编辑页面，该页面包含3个逻辑部分:

I have an edit page with 3 logical parts to the page:

• 标题
• 订购
• 付款

允许用户一次编辑每个部分，并使用一个提交按钮提交更改.

The user is allowed to edit each section at once and submit the changes with a single submit button.

在功能和用户正在编辑的对象方面，此页面很大.

This page is rather large in terms of functionality and the object the user is editing.

发送到页面进行编辑的对象是一个JSON对象，其某些属性未进行编辑，但需要在提交时传递回去.

The object being sent to the page for edit is a JSON object with some properties that don't get edited but need to pass back on submit.

在这种情况下，最佳实践是具有以下VM结构:

Is the best practice in this scenario to have the following VM structure:

• 主VM
  • 标头VM
  • 订购VM
  • 付款虚拟机
  • Master VM
    • Header VM
    • Order VM
    • Payment VM

    我将每个VM分配到页面的适当部分.将更改合并回主JSON对象以使我可以仅将一个对象提交到服务器的最简单方法是什么?

    I would assign each VM to the appropriate section of the page. What's the easiest way to merge changes back to the master JSON object so I can submit just that one object to the server?

    推荐答案

    页面拆分看起来很合理，它本身不应该成为问题. 但是您有不同的方法来如何做到这一点，这给他们带来了挑战.
    
    就像您建议的那样，简单"的出路将是拥有带有子视图模型的树状主视图.我记得当我在一两年前开始使用Knockout时，这是推荐的方法.在香草JS中，您会得到类似的东西:

    The splitting up of the page looks logical, and shouldn't be a problem by itself. But there are different approaches to how you are going to do it, which bring their own challenges.
    
    The 'easy' way out would be, -like you proposed-, to have a tree-like masterview, with child viewmodels. I remember this as a recommended approach when I started with Knockout a year or 2 ago. In vanilla JS you would get something like:

    function childVM() { this.prop = ko.observable(0); }
    function masterVM() { 
      this.children = ko.observableArray([new childVM(), new childVM()]); 
    }
    

    但是您也可以使用(甚至使用)ko.components，毕竟它专门用于将大型代码分解为模块(并与RequireJS一起很好地工作)的目的. (通过这种方式，您可以将组件彼此嵌入，尽管确实使它们相互依赖).使用先前代码的组件示例:

    But you could just as well (or even rather) use ko.components, which after all serve specifically the purpose of breaking down large code into modules (and work very well with RequireJS). (By the way you can embed components into one another, though it does make them dependant). An example of a component using the previous code:

    ko.components.register('child', {
      viewModel: function childVM(params) { this.prop = ko.observable(0||params.number)},
      template: { element: 'child' }); //looks for tmpl with id 'child'
    function masterVM() { 
      this.children = ko.observableArray([new childVM(), new childVM()]); 
    }
    

    使用这种方法，您还可以使用自定义元素，例如:<child params='{number: 4}></child>. 本质上，组件的工作方式与普通方法相同，不同之处在于它们是通过视图绑定到父对象的，而不是在viewModel中明确地绑定.下一步，这将使子模型或组件能够相互通信，将使用 pub-sub 系统.详情请参阅此处: http://www.knockmeout.net /2012/05/using-ko-native-pubsub.html

    With this approach, you could also use custom elements, eg: <child params='{number: 4}></child>. Essentially components work the same as the vanilla approach, except they are bound to a parent through the view, not explicitly in the viewModel. As a next step, which enables child models or components to communicate with one another,would be using a pub-sub system. See here for more info: http://www.knockmeout.net/2012/05/using-ko-native-pubsub.html

    要在submit之后从不同的视图模型获取数据，就像在每个子模型上使用ko.mapping.toJS调用一样简单(使用

    To get the data from your different view models after submit would be as simple as using a ko.mapping.toJS call on each child model (using the mapping plugin, it converts all observables to regular JS), combine them, stringify to JSON, and send it.

    这篇关于多个ViewModel的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！