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

Question

我在我的代码中写了嵌套的 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 的记录，任何人可以帮忙？我需要访问我的视图模型中的一些变量并更新它。

Answer 1

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

尽管将对 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东西去掉了。

Answer 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>

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

KNOCKOUT JS: $root, $parent and $parents parameter in nested foreach giving me $data

knockout.js