Knockout Js 绑定和过滤两个数组 - 最佳实践

Question

我有两个模型定义如下：

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

这是 Row 和 Card 数组：

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

这是我的 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
        })
    }
}

我不明白将卡片正确附加到行的最佳方法。我尝试了许多不同的路线：过滤、在 Row 对象上调用新 Card...但我不确定最佳策略。

Answer 1

这是我解决挑战的方法。我试图根据 Card.rowId 与 Row.Id 的匹配来设置我的 ViewModel，其中包含他们的卡片。

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)