viewModelにアクセスviewModelのスコープ外の

Question

viewModelのスコープ外のメソッドからknockout.jsメインviewModelにアクセスできるかどうかは疑問です。この例を見てみましょう：

function Employee(data) { 
    var self = this; 
    ko.mapping.fromJS(data, {}, this); 
} 

function EmployeeViewModel() { 
    var self = this; 
    this.employees = ko.observableArray([]); 

    this.loadEmployees = function() { 
    var mappedEmployees= $.map(JSON.parse(data.value), function(item) { return new Employee(item) }); 
    self.employees (mappedEmployees); 
    } 
} 

// here's the part I'm curious about 
$(document).ready(function() { 
    ko.applyBindings(new EmployeeViewModel()); 

    $("#myLink").click(function() { 
    // is there some way to get back into the ko context here? 
    // like with ko.dataFor or ko.contextFor? 
    }); 
} 

Answer 1

あなたはいつもあなたがアクセスできる変数にあなたのviewmodelを格納することによって、それをアクセスすることができ、module and revealing module patternsはいいですが、あなたは、単に他の名前と競合しないであろうオブジェクトに格納することができます（「私」はここ）：

my = { viewModel: new EmployeeViewModel() }; 
ko.applyBindings(my.viewModel); 

あなたはあなただけ（jsfiddle）あなたのクリック機能の引数として要素を取り、ko.dataForまたはko.contextForにターゲットプロパティを渡す必要があり、正しい考えを持っていました：

$(document).ready(function() { 
    my.vm = new EmployeeViewModel(); 
    ko.applyBindings(my.vm); 
    $('button').on('click', function(e) { 
     alert('you clicked on employee ' + ko.contextFor(e.target).$data.name() + 
      ' also known as ' + ko.dataFor(e.target).name()); 
    }); 
});​ 

あなたのHTML内

function EmployeeViewModel() { 
    var self = this; 

    // skipped some of your code 

    this.clickedOnEmployee = function(model, event) { 
    // assuming your Employee has a name observable 
    alert('You clicked on employee ' + model.name()); 
    }; 
} 

：二番目のパラメータ（jsfiddle）として最初のパラメータおよびイベントとして現在のモデルデータを渡す代わりにクリックイベントをバインドするためにjQueryを使用しての、あなたは常にthe Knockout click bindingを使用することができます

、 （$ rootは基本ビューモデルですが、clickedOnEmployee関数がEmployeeオブジェクトにある場合は必要ありません）。

<ul data-bind="foreach: employees"> 
    <li> 
     <span data-bind="text: name"></span> 
     <button data-bind="click: $root.clickedOnEmployee">show</button> 
    </li> 
</ul>