javascript - 绑定(bind)在 Knockout.js 中的组件内部不起作用

Question

我在这里制作了一个组件:

ko.components.register('text-list', {
    viewModel: function (params) {
        var self = this;
        // Data
        this.name = ko.observable(params.name);
        this.info = params.info;
        this.items = params.items;
        this.isOpen = ko.observable(true);
        this.selectedItem = ko.observable('');

        // Behaviors
        this.selectFacet = function (item) {
            self.selectedItem = item;
            self.isOpen = false;
            alert("selectedItem: " + self.selectedItem + ", isOpen: " + self.isOpen);
        }.bind(this);

        this.useAny = function () {
            self.selectedItem = 'Any';
            self.isOpen = false;
            alert("selectedItem: " + self.selectedItem + ", isOpen: " + self.isOpen);
        }.bind(this);

        this.remove = function () {
            self.selectedItem = '';
            self.isOpen = true;
        }.bind(this);

    },
    template:
       //'<li class="list-group-item text-list-facet">\
        '<div class="row header-row">\
            <div class="col-md-12">\
                <div class="row">\
                    <div class="col-md-4">\
                        <p class="text-left">\
                            <b><small data-bind="text: name"></small></b>\
                            <span class="glyphicon glyphicon-info-sign infoicon" data-toggle="tooltip" data-placement="top" data-bind="attr: { title: info }"></span>\
                        </p>\
                    </div>\
                    <div class="col-md-4">\
                        <p class="text-center selected-choice" data-bind="text: selectedItem"></p>\
                    </div>\
                    <div class="col-md-4">\
                        <p class="text-right">\
                            <span data-bind="visible: isOpen">\
                                <button type="button" class="close" aria-label="Close" data-bind="click: useAny"><small>use any</small> <span aria-hidden="true">&times;</span></button>\
                            </span>\
                            <span data-bind="visible: !isOpen">\
                                <button type="button" class="close" aria-label="Close" data-bind="click: remove"><small>remove</small> <span aria-hidden="true">&times;</span></button>\
                            </span>\
                        </p>\
                    </div>\
                </div>\
            </div>\
        </div>\
        <div class="row content-row" data-bind="visible: isOpen">\
            <div class="col-md-12">\
                <ul class="list-inline" data-bind="foreach: items">\
                    <li><button type="button" class="btn btn-link specul" data-bind="text: $data, click: $parent.selectFacet"></button></li>\
                </ul>\
            </div>\
        </div>'
    //</li>'
});

现在我尝试创建一个组件并传入 View 模型，如下所示:

var textListViewModel = function () {
            this.name = 'Test Section';
            this.info = 'This is a tooltip';
            this.items = ['item 1', 'item 2', 'item 3'];
        };

//apply with a viewmodel
        var $nw = $('<li class="list-group-item text-list-facet"><text-list params="name: name, info: info, items: items"></text-list></li>');
        $('#test-ul').append($nw);
        ko.applyBindings(textListViewModel, $nw[0]);

现在这看起来很棒，使项目按其应有的方式显示并填充应填充的内容。问题是，当我尝试使用我在模板中定义的那些函数(如“selectFacet”、“useAny”和“remove”)时，它似乎没有执行任何操作(但警报有效并且具有正确的值)。

我的目标是说“selectFacet”是我正在更新模板中引用的 isOpen 和 selectedItem，例如

<p class="text-center selected-choice" data-bind="text: selectedItem"></p>

和

<span data-bind="visible: isOpen"> ... <span data-bind="visible: !isOpen">

现在也许我遗漏了一些东西，但我认为这些元素应该绑定(bind)到我的 View 模型中定义的那些变量，以便在对它们进行更改时，它会在此处更新。但是，将 selectedItem 从 '' 更改为单击的任何内容后，屏幕上似乎没有任何变化!与将 isOpen 从 true 切换为 false 相同，没有任何内容被隐藏、显示或更改。

我很困惑为什么当我传入参数时事情最初会绑定(bind)并且使用相同的 data-bind="text: name"代码看起来不错，但不使用几乎相同的代码更新: data-bind =“文本:所选项目”。

我是否错过了某个步骤或在我的 View 模型中搞砸了某些东西？

Answer 1

您将 isOpen 和 selectedItem 定义为 ko.observable。

因此，当您想更改它们的值时，应该将它们用作方法:

self.isOpen(false);
self.selectedItem(item);

同样，当您想要获取这些值时:

self.isOpen();
self.selectedItem();

因此，我更改了您的代码来解决这些问题，并且它似乎有效:

ko.components.register('text-list', {
    viewModel: function (params) {
        var self = this;
        // Data
        this.name = ko.observable(params.name);
        this.info = params.info;
        this.items = params.items;
        this.isOpen = ko.observable(true);
        this.selectedItem = ko.observable('');

        // Behaviors
        this.selectFacet = function (item) {
            self.selectedItem(item);
            self.isOpen(false);
        }.bind(this);

        this.useAny = function () {
            self.selectedItem('Any');
            self.isOpen(false);
        }.bind(this);

        this.remove = function () {
            self.selectedItem('');
            self.isOpen(true);
        }.bind(this);

    },
    template:
      '<li class="list-group-item text-list-facet">\
        <div class="row header-row">\
            <div class="col-md-12">\
                <div class="row">\
                    <div class="col-md-4">\
                        <p class="text-left">\
                            <b><small data-bind="text: name"></small></b>\
                            <span class="glyphicon glyphicon-info-sign infoicon" data-toggle="tooltip" data-placement="top" data-bind="attr: { title: info }"></span>\
                        </p>\
                    </div>\
                    <div class="col-md-4">\
                        <p class="text-center selected-choice" data-bind="text: selectedItem"></p>\
                    </div>\
                    <div class="col-md-4">\
                        <p class="text-right">\
                            <span data-bind="visible: isOpen">\
                                <button type="button" class="close" aria-label="Close" data-bind="click: useAny"><small>use any</small> <span aria-hidden="true">&times;</span></button>\
                            </span>\
                            <span data-bind="visible: !isOpen">\
                                <button type="button" class="close" aria-label="Close" data-bind="click: remove"><small>remove</small> <span aria-hidden="true">&times;</span></button>\
                            </span>\
                        </p>\
                    </div>\
                </div>\
            </div>\
        </div>\
        <div class="row content-row" data-bind="visible: isOpen">\
            <div class="col-md-12">\
                <ul class="list-inline" data-bind="foreach: items">\
                    <li><button type="button" class="btn btn-link specul" data-bind="text: $data, click: $parent.selectFacet"></button></li>\
                </ul>\
            </div>\
        </div>\
    </li>'
});


var textListViewModel = function () {
            this.name = 'Test Section';
            this.info = 'This is a tooltip';
            this.items = ['item 1', 'item 2', 'item 3'];
        };

//apply with a viewmodel
var $nw = $('<li class="list-group-item text-list-facet"><text-list params="name: name, info: info, items: items"></text-list></li>');

$('#test-ul').append($nw);
ko.applyBindings(textListViewModel, $nw[0]);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul id='test-ul'></ul>