2016-09-15 9 views
0

$親バインディングコンテキストが未定義のKnockoutJSに問題があります。

コード

<div class="row"> 
    <div class="col-md-4"> 
     <div class="panel panel-info"> 
      <div class="panel-heading"> 
       <h2 class="panel-title">Products Data</h2> 
      </div> 
      <div class="panel-body"> 
       <table class="table table-striped table-bordered table-condensed" data-bind="with: ProductsViewModel"> 
        <thead> 
         <tr> 
          <th>ProductID</th> 
          <th>Product Name</th> 
          <th>Units In Stock</th> 
          <th>Action</th> 
         </tr> 
        </thead> 
        <tbody data-bind="foreach: products"> 
         <tr> 
          <td data-bind="text: $data.ProductID"></td> 
          <td data-bind="text: $data.ProductName"></td> 
          <td data-bind="text: $data.UnitsInStock"></td> 
          <td><button class="btn btn-danger btn-xs" data-bind="click: $parent.RemoveProduct">[x] delete</button></td> 
         </tr> 
        </tbody> 
       </table> 
       <button class="btn btn-large" data-bind="click: GetProducts()">Load Data</button> 
      </div> 
     </div> 
    </div> 
</div> 

と:表中の正しく

/// <reference path="../Scripts/knockout-3.4.0.js" /> 
/// <reference path="../Scripts/jquery-1.10.2.js" /> 

function ProductsViewModel() { 
    var self = this; 

    self.products = ko.observableArray([]); 

    self.RemoveProduct = function() { 
     bootbox.alert({ message: 'Pressed !!', size: 'small' }); 
    } 

    self.GetProducts = function() { 
     self.products.removeAll(); 

     $.getJSON('/api/products', function (data) { 
      $.each(data, function (key, value) { 
       self.products(data); 
      }); 
     }); 
    } 
} 

$(document).ready(function() { 
    ko.applyBindings(ProductsViewModel); 
}); 

全ての結合作業、$親が定義されていないボタン、上の結合クリックイベントを除きます。

ボタンコントロールを削除すると、すべてのデータがテーブル要素に正しくバインドされます。

これを修正する方法はありますか?それは私の知る限り、すべて標準のノックアウトコードです。

ありがとうございます。

bax2097

私は完全に$親を削除することによって、これを修正しました。すべて今働いている。

+0

ため、このJsFiddleを参照してください? –

+0

これは例外メッセージです:ライン3326で 未処理の例外は、http列21:// localhostを:51496 /スクリプト/ノックアウト-3.4.0.debug.js 0x800a138f - JavaScriptのランタイムエラー:プロパティを取得できません ' RemoveProduct 'が $親が定義されていないことを示唆していると思います – bax2097

+0

私は$ route.ProductsViewModel.RemoveProductと同じ結果を試してみました – bax2097

答えて

0

問題あなたのHTML内

  1. あなたがwith: ProductsViewModelにあなたのテーブルをバインドします。それは必要ではない。

  2. [データを読み込む]ボタンでは実際の関数を渡していません。すぐに実行する代わりに()を削除してください。

あなたがメッセージを見ている具体的にどのようなエラーdemo

+1

また 'ko .applyBindings(新しいProductsViewModel); ' –