title: Knockout Js binding and filtering two arrays - best practice
body: <p>I have two models defined as follows:</p>
  
  <pre><code>var Card = function (id, name, detail, rowId) {
  
      this.id = ko.observable(id)
      this.name = ko.observable(name)
      this.detail = ko.observable(detail)
      this.rowId = ko.observable(rowId)
  }
  
  var Row = function (id, title, detail, cards) {
  
      this.id = ko.observable(id)
      this.title = ko.observable(title)
      this.detail = ko.observable(detail)
      this.cards = ko.observableArray([])
  }
  </code></pre>
  
  <p>Here's the Row and Card arrays:</p>
  
  <pre><code>var cards = [
      {
        "id" : "-Ke__R4fK_OVSRAxZrjp",
        "detail": "More information about Card One",
        "name": "Card One",
        "rowid": "-KeFnIJLJtMz3RojUNx2",
        "url": "https://firebasestorage.googleapis.com/v0/b/leanlanes-becb2.appspot.com/o/card-images%2F142667555.jpg?alt=media&amp;token=8d64656a-29d3-44b1-b62c-1232388a59c3"
      },
      {
        "id" : "-KedLYCo2L1dyNXqsrY2",
        "detail": "Nice little article",
        "name": "A piece of work",
        "rowid": "-KeFnIJLJtMz3RojUNx2",
        "url": "https://firebasestorage.googleapis.com/v0/b/leanlanes-becb2.appspot.com/o/card-images%2FA%20piece%20of%20yourself.jpg?alt=media&amp;token=72aebfba-fdc1-4966-9272-e0103ba786a0"
      },
      {
        "id" : "-Keinb9kpnjyBAYNj1Co",
        "detail": "345ggg",
        "name": "New card 23",
        "rowid": "-KeFnIJLJtMz3RojUNx2",
        "url": ""
     }
  ]
  
  
  var rows = [
      {
        "id" : "-KeFnIJLJtMz3RojUNx2",
        "detail" : "Some small info about this row",
       "title" : "This is the first row"
      },
      {
        "id" : "-KeFoCUybj0DcvYTiH1T",
        "detail" : "Some information about a subsequent row of info",
        "title" : "The second row"
      },
      {
        "id" : "-KeK04XQCnGweRifYDsd",
        "detail" : "Details about a row",
        "title" : "The row title"
      },
      {
        "id" : "-Ke_4jxrsdUw0-S0sv02",
        "detail" : "Will this row work? ",
        "title" : "Fourth Row"
     }
  ]
  </code></pre>
  
  <p>Here's my ViewModel:</p>
  
  <pre><code>var ViewModel = function (cards, rows) {
      // Row view bindings
      this.currentRowId = ko.observable()
      this.rows = ko.observableArray(rows.map(function (row) {
          return new Row(row.id, row.title, row.detail)
      }))
      // Card view bindings
      this.currentCardName = ko.observable()
      this.currentCardDetails = ko.observable()
      this.cards = ko.observableArray(cards.map(function (card) {
          return new Card(card.id, card.name, card.detail, card.rowid)
      }))
  
      this.setCards = function(rowid, cardsarray) {
          return ko.utils.arrayFilter(cardsarray, function (card) {
              return (card.rowid === rowid) // return card if matches rowId
          })
      }
  }
  </code></pre>
  
  <p>I don't understand the best way to append the Cards onto the Row correctly. I've tried many different routes: filtering, calling a new Card on the Row object... but I'm just not sure on the best strategy.</p>