如何從子模型調用父方法（淘汰賽）

Question

我認爲標題超級誤導，但問題很簡單。

好的，讓我來看看這個問題 - fiddler。

我有三個型號：BoardViewModel，列表，卡

OK，長話短說，list模型創建一個名爲陣列cards。
self.cards = ko.observableArray(cards);（線79）

敲除依次暴露myObservableArray.remove()作爲ko.observableArray()一部分。

這又使我拋棄投放他們的目的，像這樣
self.cards.remove(card);（99行）

Q卡：有什麼辦法，我打電話從card模型刪除（）？
或者我是否需要在列表模型中定義另一個功能，並通過card對象以便能夠撥打與99線上的電話相同的電話？
self.archive = function (card)（68行）

提示：點擊編輯鏈接/按鈕，找到存檔按鈕

Answer 1

展開List對象上的createCard方法，來處理List所有Card對象的創建：

self.createCard = function (id, title, description, contentItemId) { 
    if (id) { 
     self.cards.push(new Card(id, title, description, contentItemId, self.cards)); 
    } else { 
     var title = $('#textTitle').val().trim(); 
     if (title.length > 0) { 
      var newCard = new Card(-1, title, "", -1, self.cards); 
      self.cards.push(newCard); 
      // clear data 
      $('#textTitle').val(''); 
     } 
    } 
} 

注意它推到observableArray持有Card S插入Card對象的引用。然後，卡對象可以保持這個保持和利用它：

var Card = function(id, title, description, contentItemId, list) { 
    var self = this; 

    this.containingArray = ko.observable(list); 

    /*...*/ 


    self.archive = function (card) { 
     self.containingArray.remove(self); 
    }; 

} 

但是，你則需要當父List變化，當你從一個列表拖動到另一個更新此屬性。在您的List模型

self.cardMoved = function(args) { 
    args.item.containingArray(args.targetParent); 
} 

Answer 2

您可以將父列表的參考卡在構造函數中添加（額外PARAM ），則：

self.archive = function() { 
    self.parentList.removeCard(self); 
}; 

JSFiddle

你需要處理父母的變化，就像@James說的那樣。

Answer 3

其他的答案都很好

<div class="cards" data-bind="sortable: { data: cards, afterMove: cardMoved }"> 

具有相應的功能，但它似乎像你解決這個問題：你可以添加其他選項結合做到這一點一個令人困惑的方式。將卡片作爲一個類的整個想法是，它不需要知道它所在的數組（如果它包含在數組中）。

的視圖會處理這個淘汰賽首選方式，如果你有一個按鈕，你的卡上的「刪除」，在視圖中這樣寫：

<div data-bind="foreach: cards"> 
    <div class="card"> 
    <div class="content"> ... </div> 
    <button data-bind="click: $parent.cards.remove">Remove</button> 
    </div> 
</div> 

這種方式，你可以保持您從其容器和中分離出的卡片類具有處理在該特定視圖中從其容器中移除卡的優雅方式。

Answer 4

我的解決方案有點類似於James的，但我更喜歡將回調傳遞給對象，而不是整個父列表; （和我辦卡建設不同）

因此該顯卡的構造看起來像

var Card = function (id, title, description, contentItemId, removeCallback) { 
    //Rest unchanged 
    self.archive = function() { 
     removeCallback(self); 
    }; 
} 

然後，你的列表將是這個樣子：（注意，從cards到cardData的變化）

var List = function (id, name, cardData, sortOrder) { 
    var self = this; 

    function removeCard(card) { 
     self.removeCard(card); 
    } 

    self.cards = ko.observableArray(cardData.map(function (data) { 
     //Construct a card object from the provided data 
     return new Card(data.id, data.title, data.description, data.contentItemId, removeCard); 
    })); 
    //Rest unchanged 
} 

最後，構建你的列表時，你會改變從

new Card(1, "Document all code", "Document all classes, methods and properties in source code.", -1), 

每張卡

到

{ 
    id: 1, 
    name: "Document all code", 
    description: "Document all classes, methods and properties in source code.", 
    contentItemId: -1 
} 

JSFiddle