Question

我有Knockout的嵌套循环。我想引用父“范围”中的某些内容。如果你看到下面我总是想要引用相同的父/祖父母，无论我有多深嵌套循环。我看过“with”绑定，不确定它会对我有帮助。有没有办法可以为特定的作用域创建一个别名，所以在嵌套循环中我可以参考这个别名，并且仍然能够引用当前循环的范围吗？

    <!-- Somewhere up there is the "scope" I want to capture -->
    <!-- ko foreach: getPages() -->
        <span data-bind="text: pageName" ></span>
        <button data-bind="click: $parents[1].myFunction()" >Press me</button>
        <!-- ko foreach: categories -->
             <span data-bind="text: categoryName" ></span>
             <button data-bind="click: $parents[2].myFunction()" >Press me</button>
            <!-- ko foreach: questions -->
                <span data-bind="text: questionText" ></span>
                <button data-bind="click: $parents[3].myFunction()" >Press me</button>
             <!-- /ko -->
        <!-- /ko -->
    <!-- /ko -->

Answer 1

foreach binding支持as别名和(custom) withProperties binding一样。

<!-- ko withProperties: { book: $root.getBook() } -->
  <!-- ko foreach: {data: book.pages, as: 'page'} -->
    <span data-bind="text: page.pageName" ></span>
    <button data-bind="click: book.bookClicked" >Press me</button>
    <!-- ko foreach: {data: page.categories, as: 'category'} -->
      <span data-bind="text: category.categoryName" ></span>
      <button data-bind="click: page.pageClicked" >Press me</button>
      <!-- etc -->
    <!-- /ko -->
  <!-- /ko -->
<!-- /ko -->

我的声明性绑定的

无直接使用$parent。

Answer 2

@user2864740 answer的问题在于它没有开箱即用jsFiddle 。

第一个问题：

绑定＆＃39; withProperties＆＃39;不能与虚拟元素一起使用

要修复此问题，只需添加以下代码：

ko.virtualElements.allowedBindings.withProperties = true;

之后，您将获得另一个例外：

无法解析绑定。消息：ReferenceError：＆＃39; book＆＃39;是不确定的;绑定值：foreach：{data：book.pages，as：＆＃39; page＆＃39;}

这表明withProperties根本不起作用 - 它没有像你期望的那样在绑定上下文中为其子绑定创建book属性。

以下是完全正常工作且可重复使用的自定义绑定（jsFiddle）：

ko.bindingHandlers.withProperties = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // Make a modified binding context, with a extra properties, and apply it to descendant elements
        var value = ko.utils.unwrapObservable(valueAccessor()),
            innerBindingContext = bindingContext.extend(value);

        ko.applyBindingsToDescendants(innerBindingContext, element);

        // Also tell KO *not* to bind the descendants itself, otherwise they will be bound twice
        return { controlsDescendantBindings: true };
    }
};
ko.virtualElements.allowedBindings.withProperties = true;

Answer 3

我认为这会对你有所帮助 Calling a function in a parent's scope in nested view model

和jsfiddle演示 jsfiddle

如何使用嵌套循环引用相同的父/祖父对象范围？

3 个答案: