無法訪問父級datacontext並綁定到單擊事件

Question

即使查看此處找到的工作示例之後：http://jsfiddle.net/tsenyi/FCFRE/ 我無法從foreach綁定訪問我的數據的父上下文。我想處理訂單明細表中的刪除按鈕的點擊事件。 類似地雷的幾個其他問題都指向第2項這裏找到淘汰賽文檔中： http://knockoutjs.com/documentation/click-binding.html

由於我有限的知識能力，我無法掌握爲什麼上面的文件解決了我的問題。請幫助我。

備註： 標題中的此按鈕觸發刪除處理程序。它只是一個測試：

<input type="button" value="Remove = this works" data-bind="click:RemoveLineItem" /> 

這是壞了的按鈕（這是問題是這個問題的主題）。我不試圖將$ index傳遞給我的處理程序。我需要做的，但我刪除用於調試目的的代碼：

<td><input type="button" value="Remove - this does not work" data-bind="click: $root.RemoveLineItem"/></td> 

爲了記錄在案：請注意，在文件準備功能，我的視圖模型創建的樣本數據增加了兩個的OrderDetail對象的順序詳細信息對象。當我從按鈕中刪除數據綁定語句時，兩個數據行都被渲染。如下所示，只會導致一行渲染。我不知道爲什麼顯然我做錯了什麼。

jQuery的版本2.1.1 =淘汰賽 版本= 3.1.0

下面所示的JavaScript文件由主網頁加載所以在我的html沒有顯示腳本元素。除上述問題外，所有綁定均按預期工作。

<form data-bind="submit:submitOrder"> 
<div> 
    <div data-bind="with: Hdr"> 
     <p>ID: <input data-bind="value:ID" /></p> 
     <p>Order Date: <input data-bind="value:OrderDate" /></p> 
     <p>Customer Name: <input data-bind="value:CustomerName" /></p> 
     <p>Customer City:<input data-bind="value:CustomerCity" /></p> 

    </div> 

    <input type="button" value="Remove = this works" data-bind="click:RemoveLineItem" /> 
    <table> 
     <thead> 
      <tr> 
       <th>Row ID</th> 
       <th>Item ID</th> 
       <th>Item Desc</th> 
       <th>Qty</th> 
       <th>Price</th> 
       <th>Ext</th> 
       <th>Remove</th> 
      </tr> 
     </thead> 

     <tbody data-bind="foreach: Dtl"> 
      <tr> 
       <td><input data-bind="value: ID" /></td> 
       <td><input data-bind="value: ItemID" /></td> 
       <td><input data-bind="value: Description" /></td> 
       <td><input data-bind="value: Qty" /></td> 
       <td><input data-bind="value: Price" /></td> 
       <td><input data-bind="value: Ext" /></td> 
       <td><input type="button" value="Remove - this does not work" data-bind="click: $root.RemoveLineItem"/></td> 
      </tr> 
     </tbody> 
    </table> 

</div> 
    <input type="submit" value="Submit" /> 
</form> 

// javascript... 


var today = function() { 
    this.now = new Date(); 
    this.dd = now.getDate(); 
    this.mm = now.getMonth() + 1; 
    this.yy = now.getFullYear(); 
    if (dd < 10) { dd = '0' + dd } 
    if (mm < 10) { mm = '0' + mm } 
    return mm + '/' + dd + '/' + yy; 
} 

var orderHeader = function (id, orderDate, customerName, customerCity) { 
    this.ID = ko.observable(id); 
    this.OrderDate = ko.observable(orderDate); 
    this.CustomerName = ko.observable(customerName); 
    this.CustomerCity = ko.observable(customerCity); 
}; 

var orderDetail = function (id, orderID, itemID, description, qty, price) { 
    var self = this; 
    this.ID = ko.observable(id); 
    this.OrderID = ko.observable(orderID); 
    this.ItemID = ko.observable(itemID); 
    this.Description = ko.observable(description); 
    this.Qty = ko.observable(qty); 
    this.Price = ko.observable(price); 
    this.Ext = ko.computed(function() { return self.Qty() * self.Price() }, orderDetail); 
}; 

// --------------------------- 

var sales = function() { 
    var self = this; 
    self.blue = ko.observable(30); 
    self.orange = ko.observable(14); 
    self.pink = ko.observable(44); 
    self.showPurple = ko.observable(true); 
}; 

var viewModel = function (hdr, dtl, sales) { 
    var self = this; 
    self.Hdr = ko.observable(hdr); 
    self.Dtl = ko.observableArray(dtl); 
    self.Sales = ko.observable(sales); 
    self.RemoveLineItem = function() { 
     //Dtl.splice(index, 1); 
     alert('RemoveLineItem was called'); 
    }; 

    self.submitOrder = function() { 
     // http://stackoverflow.com/questions/16245905/fetching-or-sending-data-from-a-form-using-knockout-js 
     var hdr = { 
      ID: self.Hdr().ID(), 
      OrderDate: self.Hdr().OrderDate(), 
      CustomerName: self.Hdr().CustomerName(), 
      CustomerCity: self.Hdr().CustomerCity() 
     }; 
     $.post("/api/OrderAPI/SubmitOrderHeader", hdr, function (response) { alert('submitted'); }); 

    } 

    self.gridViewModel = new ko.simpleGrid.viewModel({ 
     data: this.Dtl, columns: 
      [ 
       { headerText: "ID", rowText: "ID", width: 230 }, 
       { headerText: "ItemID", rowText: "ItemID", width: 280 }, 
       { headerText: "Description", rowText: "Description", width: 430 } 
      ] 

    }); 
}; 


$(document).ready(function() { 

    var orderOne = new orderHeader(1, today(), 'sam', 'manhattan beach'); 
    var details = [ 
     new orderDetail(1, 1, 10, 'laptop', 3, 2300), 
     new orderDetail(2, 1, 36, 'mouse', 2, 18) 
    ]; 
    var sls = new sales(); 
    //ko.applyBindings(new orderHeader(0,new Date(),'Sam','Santa Monica')); 
    ko.applyBindings(viewModel(orderOne, details, sls)); 
}); 

Answer 1

我只是通過您的代碼看起來。它看起來很好 - 我經常使用類似的模式，其中我有一個視圖模型與項目列表，該列表使用foreach呈現，並且對於每個項目我有一個移除按鈕，可以調用回到$ parent.removeSomething功能。所以，要自信，要我把你的HTML和JS成小提琴和調整了兩件事情：

• 我用300個波特的修正，上面插入新的關鍵字
• 我調整你的RemoveLineItem功能，展示瞭如何不需要傳遞$ index，而是可以利用Knockout給出的參數 - 這是您引用的Knockout文檔的第2項中描述的技術。

它看起來像這樣：

self.RemoveLineItem = function (line_item, event) { 
    self.Dtl.remove(line_item); 
    alert('RemoveLineItem was called'); 
}; 

這裏的小提琴：

http://jsfiddle.net/RUZ4W/

所以這對我的作品......它爲你工作？如果小提琴確實爲你工作，那麼希望它會讓你放心，你的代碼是在正確的軌道上。這個問題可能是由應用程序中的其他內容引起的。你有其他視圖模型嗎？如果你這樣做，你可以嘗試註釋掉ko.applyBinding語句，看看你是否可以隔離導致問題的另一個視圖模型。

Answer 2

嘗試改變這一行：

ko.applyBindings(viewModel(orderOne, details, sls)); 

這一行（添加new）：

ko.applyBindings(new viewModel(orderOne, details, sls));