javascript - ViewModel 中的功能范围

Question

我正在尝试通过单击事件从我的 ViewModel 调用一个函数。当我从 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>

但是，我显然希望从“单元格”div 而不是行中调用我的函数。有什么建议吗？

Answer 1

一旦您处于另一个 foreach 循环的范围内，$parent 关键字就不再指代您认为的对象($root) 但到 Periods 数组。

只要你知道你所指的函数/属性在 Root View 模型上，你就应该使用$root相反:

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