嵌套对象中的$ parent出现敲除问题

问题描述

当父对象不在根级别时，我在访问视图模型中的父对象时遇到问题。

例如，以下作品（ ）

  <div>
    <!-- ko foreach: items -->

        <input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenItems" />
        <span data-bind="text:$data"></span> <br>

    <!-- /ko -->

    <!-- ko foreach: chosenItems -->
            Checked values are <span data-bind="text:$data"></span> <br>
    <!-- /ko -->
    </div>

    <script>

        $(function(){       

            function viewModel() {
                    var self = this;
                    self.items = ko.observableArray();
                    self.chosenItems= ko.observableArray()
                    self.items.push('Choice 1','Choice 2' );
                    self.chosenItems().push('Choice 1');
                        console.log(self);
                }
        var vm = new viewModel();
            ko.applyBindings(vm);

       });


    </script>

但是，当我在视图模型内有一个对象并且该对象有一个数组时，在迭代数组时我无法使用$ parent到达该对象（ ）

<DIV>

<!-- ko foreach: customValues.avblFruits -->
    <input type="checkbox" data-bind="checkedValue: $data, checked: $parent.Fruits" />
    <span data-bind="text: $data"></span>
<!-- /ko -->

</DIV>

<br>

<DIV>

<!-- ko foreach: customValues.Fruits -->    
    Selected Values are <span data-bind="text: $data"></span> <br>
<!-- /ko -->

</DIV>

<script>

    $(function(){       

        var selectedValues = {"Fruits" : ['Apple']};

        var availableValues = {"avblFruits" : ['Apple', 'Orange']};

        function CustomValues(data){
                var self = this;
                ko.mapping.fromJS(data, {}, self);
                ko.mapping.fromJS(availableValues, {}, self);
                console.log(self);
        }

        var mapping = {
            create: function (options) {
                return new CustomValues(options.data);
            }
        };

        function viewModel() {
                var self = this;
                self.customValues = ko.mapping.fromJS(selectedValues, mapping );                            
                console.log(self);

            }
    var vm = new viewModel();
        ko.applyBindings(vm);
    }); 


</script>

当我改变

<input type="checkbox" data-bind="checkedValue: $data, checked: $parent.Fruits" /> 

至

<input type="checkbox" data-bind="checkedValue: $data, checked: $root.customValues.Fruits" />

任何想法为什么它不能与$ parent一起使用？