无法将可观察到的内部组件绑定到 If 绑定

Question

我正在尝试使用 if 绑定有条件地加载组件。但是，我无法使用下面的构造更改分配给 if-binding 的可观察对象的值，因为我认为应该更改可观察对象的函数在视图模型之外。我最初这样做是因为这是在 KnockoutJS 网站的示例中所做的：

define(["jquery", "knockout", "ko-postbox", 
    "text!./parent.html"], function($, ko, kopost, template) {

    ko.postbox.subscribe("child-click", function(newValue) {
        ParentViewModel.prototype.displayChildContent(newValue);
    }, this);

    function ParentViewModel() {
        //
        // I NEED TO CHANGE THIS FROM OUTSIDE THE VIEW MODEL
        //
        this.childClicked = ko.observable(false); 
    }

    ParentViewModel.prototype.displayParentContent = function(value) { 
        switch (value.toLowerCase()) {
            default:
                break;
        }
    };

    ParentViewModel.prototype.displayChildContent = function(value) { 
        switch (value.toLowerCase()) {
            case "child1":
                alert();
                //
                // I NEED TO CHANGE OBSERVABLE HERE
                //
                break;
            default:
                break;
        }
    };

    return { viewModel: ParentViewModel, template: template };
});

然后我尝试这样做：我将函数放在视图模型中，然后将视图模型分配给一个变量。注意 return 值：我使用 "instance" 而不是通常的 "viewModel" 因为当我使用 "viewModel" 时，会出现错误 "Uncaught Error: Component 'parent': Unknown viewModel value: [object Object]" 而且，它被构造了两次.

define(["jquery", "knockout", "ko-postbox", 
    "text!./parent.html"], function($, ko, kopost, template) {

    ko.postbox.subscribe("child click", function(newValue) {
        model.displayChildContent(newValue);
    }, this);

    function ParentViewModel() {
        var self = this;

        self.childClicked = ko.observable(false);

        self.displayChildContent = function(value) { 
            switch (value.toLowerCase()) {
                case "child1":
                    alert();
                    self.childClicked(true);
                    break;
                default:
                    break;
            }
        };
    }

    var model = new ParentViewModel();

    return { instance: model, template: template };
});

当我这样做时，if 绑定不起作用。错误是 "Uncaught ReferenceError: Unable to process binding "if: function (){return childClicked }" 消息：未定义 childClicked

这是父级 HTML:

<div id="container">

    <!-- ko if: childClicked -->
    <!-- ko component: {name: "parent"} --><!-- /ko -->
    <!-- /ko -->

</div>

Answer 1

如果我没理解错的话，您希望能够从组件内部和外部控制组件的呈现。诀窍是 use params 将控制 observable 传递给组件。

在此示例中，父级中的复选框控制组件的渲染，但组件还有一个隐藏我按钮，该按钮通过相同的控制 observable 触发取消渲染。

由于代码片段运行器现在似乎已关闭，这里与 fiddle 相同：http://jsfiddle.net/tje9e2yy/

function ChildViewModel(params) {
  this.hideMe = function() {
    params.show(false);
  };
}

ko.components.register('child-component', {
  viewModel: ChildViewModel,
  template: {
    element: 'child-template'
  }
});

var vm = {
  childClicked: ko.observable(false)
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<template id="child-template">
  <button data-bind="click:hideMe">Hide Me</button>
</template>
<div id="container">
  <input type="checkbox" data-bind="checked:childClicked" />
  <!-- ko if: childClicked -->
  <!-- ko component: {name: "child-component", params:{show:childClicked}} -->
  <!-- /ko -->
  <!-- /ko -->
</div>

无法将可观察到的内部组件绑定到 If 绑定

Can't bind observable inside component to an If-binding

knockout.js

knockout-3.0