如何从子模型调用父方法（淘汰赛）

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