Knockout Js Bindung und Filterung zwei Arrays - Best Practice

Question

Ich habe zwei Modelle wie folgt definiert:

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([]) 
} 

Hier ist die Reihe und Kartenanordnungen:

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&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&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" 
    } 
] 

Hier ist meine Viewmodel:

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 
     }) 
    } 
} 

Ich verstehe nicht den besten Weg, um die Karten auf die Zeile richtig anzuhängen. Ich habe viele verschiedene Routen ausprobiert: Filtern, eine neue Karte auf dem Row-Objekt aufrufen ... aber ich bin mir nicht sicher über die beste Strategie.

Answer 1

So habe ich die Herausforderung gelöst. Ich habe versucht, mein ViewModel mit Zeilen einzurichten, die ihre Cards enthalten, basierend auf der Übereinstimmung der Card.rowId mit der Row.Id.

var ViewModel = function (rows, cards) { 

    // Setup Rows based on existing data 
    var rowsWithCards = ko.utils.arrayMap(rows, function(row) { 
     var cardStack = [] 
     cards.forEach(function (card) { 
      if (card.rowid === row.id) { 
       cardStack.push(card) 
      } 
     }) 
     return new Row(row.id, row.title, row.detail, cardStack) 
    }) 

    // Row view bindings 
    this.currentRowId = ko.observable() 
    this.rows = ko.observableArray(rowsWithCards) 
    this.cards = ko.observableArray(cards) 
    // Card view bindings 
    this.currentCardName = ko.observable() 
    this.currentCardDetails = ko.observable() 

}.bind(this)