Сфера действия в ViewModel

Question

Я пытаюсь вызвать функцию из моего ViewModel из события click. Похоже, что функция выходит за пределы области действия, когда я вызываю ее из цикла foreach. Новое для JavaScript и попытка обернуть голову тем, как/почему оказалось бесполезным.

Функция:

$dyn.controls.Test = function (props, element) { 
    var self = this; 

    $dyn.ui.Control.apply(this, arguments); 
    $dyn.ui.applyDefaults(this, props, $dyn.ui.defaults.Test); 

    self.RowItem = [ 
     { 
     . 
     . 
     . 
     }]; 

    self.Periods = [ 
     { Label: "13:00", Open: true }, 
     { Label: "13:10", Open: true }, 
     . 
     . 
     . 
     { Label: "14:30", Open: true }]; 

    self.clickedMe = function (action) { //This is the function I want to call 
     alert("Clicked"); 
    }; 
    . 
    . 
    . 

В HTML это работает:

<div data-dyn-bind="foreach: $data.RowItem" class="table" id="workspace"> 
    <div class="row"> 
     <div class="resourceCell" data-dyn-bind="attr: {id: $data.Id}"> 
      <div data-dyn-bind="text: $data.Id" class="resourceCell_inner"></div> 
     </div> 
     <div class="periodRow" data-dyn-bind="foreach: $parent(0).Periods, click: function(event) {$parent(0).clickedMe(event);}"> 
      <div class="periodCell"></div> 
     </div> 
    </div> 
</div> 

и это не делает:

<div data-dyn-bind="foreach: $data.RowItem" class="table" id="workspace"> 
    <div class="row"> 
     <div class="resourceCell" data-dyn-bind="attr: {id: $data.Id}"> 
      <div data-dyn-bind="text: $data.Id" class="resourceCell_inner"></div> 
     </div> 
     <div class="periodRow" data-dyn-bind="foreach: $parent(0).Periods"> 
      <div class="periodCell" data-dyn-bind="click: function(event) {$parent(0).clickedMe(event);}"></div> 
     </div> 
    </div> 
</div> 

Однако я явно хочу, чтобы моя функция вызываемая из «cell» divs, а не строка. Любой совет? не

Answer 1

После того, как вы в рамках другого foreach цикла, $parent ключевого слова больше не относится к объекту, который вы думаете, что это ($root), но к Periods массива.

Всякий раз, когда вы знаете, что function/property вы имеете в виду на корневой вид-модели, вы должны использовать вместо $root:

<div class="periodCell" 
    data-dyn-bind="click: function(event) { $root.clickedMe(event); }"></div> 

Answer 2

Первый из них работает, потому что сфера применения такой же, но в цикле , каждая итерация представляется как $data, и это может быть необязательно свойство clickedMe. Вы можете попробовать использовать

$parent.$parent(0).clickedMe(event);

Здесь $parent будет указывать на начальный объем и оттуда вы можете перейти к родителю с помощью $parent(0).

Кроме того, вместо

click: function(event) {$parent(0).clickedMe(event);} 

вы можете попробовать

click: $parent(0).clickedMe 

event автоматически добавляется в качестве параметра.