javascript - Knockout JS ObservableArray with many-to-many relationships -

I'm building guest list app using knockout. Js, and things are still running fast. Although I have a best practice question, there are many different types of objects in my app: the tags between guests and them. Guests can have many tags, and there may be many guests in the tag. At different points in the app, I need to show both the different array. For example, I have a "guest" view where one can see all the guests with their respective tags, and I have " Tag "view where all the tags and their respective guests can see. Currently, the code to add a guest to a tag for me looks like this:

  var tag = function {opts} {this.guests = ko.observableArray () // other tag code Here ...} var guest = function (opts) {this.tags = ko.observableArray () // Other guest code is here ... var self = this is this.addTag = function {tag} {self.tags. Push (tag) tags.guests.push (self)}}   
 I know that there should be a better way of doing many such relationships in knockout, for each observation Apart from updating freely. This leads to a recurring app structure where a guest has a tag property / array that contains a tag, in which the guest property / array contains a guest, which has a tag property ... You get the picture.  
 Now, the ViewModel structure is such:  
  - Parent object - Guest overview - array - Guest object - Property of the guest in the form of tag object - Tag viewerArray - Tags Object - Commodity object as guest tag property   
 So I think my question is two times: 1) Is my visual model a better way to avoid recursive arrays? ? And 2) How can I better use Knockout.js to update my ViewModel in a systematic way, instead of updating both tag arrays and guest arrays separately? Thanks!   
 
 
 There are probably other ways to do this, but without sacrificing this method, there is very little duplication Proper Modeling A server should not have any problem in generating data in this format.  
 Here it is in an (furious style). Note that clicking on any tag or guest will cause the selections given below (first selected by default) to select it.  
 Actually, store the relationship with the id and use the  computed  array here is an original view model for representing associations:  
 < Code> var ViewModel = function (guest, tags) {var self = this; Self.guests = ko.observableArray (ko.utils.arrayMap (Guest, Function (i) {New Guest (I);})); Self.tags = ko.observableArray (ko.utils.arrayMap (tag, function (i) {new tag (i);})); Self.selectedGuest = ko.observable (self.guests () [0]); Self.selectedTag = ko.observable (self.tags () [0]); Self.guestTags = ko.computed (function () {return ko.utils.arrayFilter (self.tags (), function (t) {return self.selectedGuest (.) (.) IndexOf (t.id ()) & Gt; -1;});}); Self.tagGuests = ko.computed (function () {return ko.utils.arrayFilter (self.guests (), function (g) {return self.selectedTag (). Guests (). IndexOf (g.id ()) & Gt; -1;});}); };   
 UPDATE  
 So I have made one to display a different type of mapping, but this code is easily co-existant with the above view model Can; Its different for display only, instead of closing the selection, it provides a general lookup, so that any code can be consumed by it. The tags below are HTML (guest is symmetric), and the  guestmap  function that was added to the view-model.  
 You note that the name is  Input  now, so you can change the name and see all the bindings. Tell me what you think:  
  & lt; Div & gt; Tag & lt; Ul data-bound = "foreach: tags" & gt; & Lt; Li & gt; & Lt; Input data-bind = "value: name, value update: 'afterkeydown'" /> & Lt; / Br & gt; & Lt; Period & gt; From the tag & lt; / Span & gt; & Lt; Ul data-bound = "foreach: guest" & gt; & Lt; Li & gt; & Lt; Span data-bind = "text: $ parent [1] .guestMap ($ data) .name ()" & gt; & Lt; / Span & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;   
 
  self.guestMap = function (id) {return ko.utils.arrayFirst (self.guests (), function (g) {return id == g. Id ();}); };