KNOCKOUT JS：嵌套 foreach 中的 $root、$parent 和 $parents 参数给了我 $data答案

【问题标题】：KNOCKOUT JS: $root, $parent and $parents parameter in nested foreach giving me $dataKNOCKOUT JS：嵌套 foreach 中的 $root、$parent 和 $parents 参数给了我 $data
【发布时间】：2021-08-20 09:16:47
【问题描述】：

我在我的代码中编写了嵌套的 foreach

        <div class="row justify-content-center" data-bind="foreach: subCategoryList">
            <div class="row text-center d-flex justify-content-center mt-5 mb-3">
                <h5 class="text-uppercase text-warning" data-bind="text: 'Choose your ' + $data"></h5>
            </div>
            <!-- ko foreach: $root.ProductListBySubCategory($root, $data)-->
            <div class="col-sm-3 px-2">
                <div class="card">
                    <div class="card-header" data-bind="text: Name"></div>
                    <div class="card-body">
                        <img onerror="Util.ImagePlaceholder(this, 262, 262)" class="product-image img-fluid shadow rounded" data-bind="attr: { src: Util.ResolveUrlApi('/' + ImageSmall) }" />
                        <h5 class="text-center text-secondary mt-5" data-bind="text:Util.FormatCurrency(UnitPrice)"></h5>
                        <ul class="mt-3" data-bind="visible: !Util.IsEmpty(Description">
                            <li>
                                <span><i class="fa fa-check-circle" aria-hidden="true"></i></span>
                                <span data-bind="text: (!Util.IsEmpty(Description) ? Desciption : 'N/A')"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="card-footer">
                        <button class="btn text-uppercase" data-bind="click: $root.ClickSubtractQuantity.bind($root)"><i class="fa fa-minus"></i></button>
                        <div class="col-sm-5 px-2">
                            <input type="text" maxlength="5" class="form-control text-center" />
                        </div>
                        <button class="btn text-uppercase" data-bind="click: $root.ClickAddQuantity.bind($root)"><i class="fa fa-plus"></i></button>
                    </div>
                </div>
            </div>
            <!-- /ko -->
        </div>

我在click: $root.ClickSubtractQuantity.bind($root) 和click: $root.ClickAddQuantity.bind($root) 中遇到问题，参数$root 保持传递$root.ProductListBySubCategory($root, $data) 或更确切地说是$data 而不是我的viewModel 的记录，有人可以帮忙吗？我需要访问我的视图模型中的一些变量并更新它。

【问题讨论】：

请分享您的视图模型。

标签： knockout.js

【解决方案1】：

你传递给bind的第一个参数在函数中变成了this的值，所以在ClickAddQuantity中，this现在应该引用$root。您的处理程序将收到的第一个参数确实仍然是$data，因为这是 KO 的默认行为，除非您要覆盖它：click: $root.ClickSubtractQuantity.bind($root, $root)。您传递给bind 方法的第二个 参数将成为该函数的第一个 参数。

将this 的引用复制到self 或vm 等不同的变量会更容易，因此您可以轻松访问每个函数中的视图模型。

function ViewModel() {
    var vm = this;

    vm.foo = '123';
    
    vm.myClickHandler = function (item) {
        // 'item' is the item that was clicked
        // 'vm' is the viewmodel ($root usually)
        // So you can now access 'vm.foo'
    }
}

那么你就可以去掉bind的东西了。

【讨论】：

谢谢你，但我的 ViewModel 类没有功能，更像是我认为的类型脚本？我得到了我认为现在很好的解决方案，我把我的ViewModel 放在外面的变量中，就像这个Class ViewModel(){.....} var vm = new ViewModel 然后绑定它ko.applyBindings(vm); 我在我的类函数中调用vm，那样，我可以使用我的 ViewModel 变量，例如 vm.foo。大声笑

【解决方案2】：

除了@Brother_Woodrow 的回答之外，您还可以像这样在foreach 中指定当前项目的名称，这在嵌套较深时会有所帮助。

<div data-bind="foreach {data: subCategoryList, as: 'subCategory'}" />
  <!-- ko foreach: {data: $root.ProductListBySubCategory($root, subCategory), as: 'product'}-->
    <div data-bind="text: subCategory.name"></div>
    <div data-bind="text: product.name"></div>
  <!-- /ko -->
</div>

【讨论】：