绑定不在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>'
});

现在我正在尝试创建一个组件并传入视图模型，如下所示：

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

现在也许我错过了一些东西，但我认为这些元素应该绑定到我的视图模型中定义的那些变量，以便在更改它们时，它会在这里更新。但是，在将selectedItem从''更改为任何被点击的内容时，屏幕上似乎没有任何变化！与toggling isOpen相同，从true到false，没有任何东西被隐藏，显示，改变。

当我传入参数并使用相同的data-bind =“text：name”代码看起来很好时，我很难理解为什么事情会绑定，但是不会使用几乎相同的代码更新：data-bind =“text：selectedItem”。

我在视图模型中是否错过了一个步骤或搞砸了什么？

Answer 1

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

因此，当您想要更改其值时，您应该将它们用作方法：

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

同样，当你想获得这些价值观时：

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

所以，我已经更改了您的代码来修复这些问题，它似乎正在运行：

＆＃13;

＆＃13;

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]);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;