ViewModel中的函数范围

Question

我试图从ClickModel中调用一个来自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>

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

Answer 1

一旦你进入另一个foreach循环的范围， $parent关键字不再引用你认为它的对象（ $root ），而是引用Periods数组。

每当你知道你所指的function / property是在根视图模型上时，你应该使用$root代替：

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

Answer 2

第一个clickedMe ，因为范围相同，但在循环中，每个迭代都表示为$data ，这可能没有clickedMe属性。 你可以尝试使用

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

这里$parent将指向初始范围，然后您可以使用$parent(0)转到其父级。

而且，而不是

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

你可以试试

click: $parent(0).clickedMe

event自动添加为参数。