根訪問組件結合

Question

內的方法，我這裏在我需要解決的有問題knockoutjs組件一些示例代碼：

<template id="item-list-tmpl"> 
    <ul data-bind="foreach: MyList"> 
     <li> 
     <span data-bind="text: $data.DisplayText"></span> 
     <span data-bind="text: $root.DeleteItem"></span> 
     </li> 
    </ul> 
</template> 

ko.components.register('item-list', { 
    template: $("#item-list-tmpl").html(), 
    viewModel: function (params) { 
     self.MyList = params.MyList; // object inside this list { DisplayText: "Sample Text" } 
    } 
}); 

我想知道我怎麼能訪問Delete在我的根視圖模型

以下功能就是我如何使用組件：

<div data-bind='component:{ 
      name: "item-list" 
      params: { 
       MyList: myVM.MyList 
      } 
     }'></div> 

這是我的主視圖模型的代碼結構，其中MyList所在：

function MainVM(){ 
    var self = this; 

    self.MyList = ko.observableArray([{ DisplayText: "Sample Text" }]); 
    self.Delete = function(value){ 
     self.MyList.remove(value); 
    }; 
} 

我在這裏的問題是，我似乎無法從我的主視圖模型訪問列表元素，裏面的Delete功能。有人在這裏有什麼想法嗎？

Answer 1

但你不希望向訪問Delete的根對象，因爲我不認爲它的存在。相反，它似乎將在根的myVM屬性上。

因爲你做MyList: myVM.MyList你實際上跳過了一層上下文，所以myVM永遠不是真正的上下文，當你訪問根目錄時你總是必須再次引用它。所以像$root.myVM.Delete應該工作。

ko.components.register('item-list', { 
 
    template: $("#item-list-tmpl").html(), 
 
    viewModel: function (params) { 
 
     self.MyList = params.MyList; // object inside this list { DisplayText: "Sample Text" } 
 
    } 
 
}); 
 

 
function MainVM(){ 
 
    var self = this; 
 
    self.MyList = ko.observableArray([{ DisplayText: "Sample Text" }]); 
 
    self.Delete = function(value){ console.log(value); 
 
     self.MyList.remove(value); 
 
    }; 
 
} 
 

 
ko.applyBindings({myVM: new MainVM()});

pre { background: white; padding: 10px; color: #333; font: 11px consolas; border: 1px solid #ddd; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<template id="item-list-tmpl"> 
 
    <ul data-bind="foreach: MyList"> 
 
     <li> 
 
     <span data-bind="text: $data.DisplayText"></span> 
 
     <button data-bind="click: $root.myVM.Delete">$root.myVM.Delete</button> 
 
     <button data-bind="click: $parents[1].myVM.Delete">$parents[1].myVM.Delete</button> 
 
     </li> 
 
    </ul> 
 
</template> 
 

 
<div data-bind='component: { 
 
    name: "item-list", 
 
    params: { MyList: myVM.MyList } 
 
}'></div> 
 

 
<hr>Debug info: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

：您也可以通過 $parents[]層次那裏