Javascript 在knockout.js中的组件内部绑定不起作用

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

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>'
});

ko.components.register（'text-list'{
viewModel:函数（参数）{
var self=这个；
//资料
this.name=ko.observable（参数名称）；
this.info=params.info；
this.items=params.items；
this.isOpen=ko.可观察（真）；
this.selectedItem=ko.可观察（“”）；
//行为
this.selectFacet=功能（项目）{
self.selectedItem=项目；
self.isOpen=false；
警报（“selectedItem:+self.selectedItem+”，isOpen:+self.isOpen）；
}.约束（本）；
this.useAny=函数（）{
self.selectedItem='Any'；
self.isOpen=false；
警报（“selectedItem:+self.selectedItem+”，isOpen:+self.isOpen）；
}.约束（本）；
this.remove=函数（）{
self.selectedItem=''；
self.isOpen=true；
}.约束（本）；
},
模板：
//“
\
'\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
使用任意时间（&T）\
\
\
删除&次\
\
\
\
\
\
\
\
\
\
\
\
\
'
//
'
});

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

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

var textListViewModel=函数（）{
this.name='测试段'；
this.info='这是一个工具提示'；
this.items=['item 1'、'item 2'、'item 3']；
};
//与viewmodel一起应用
var$nw=$（'
）；
$（'#test ul'）。追加（$nw）；
ko.applyBindings（textListViewModel，$nw[0]）；

现在这看起来很好，使项目看起来像它应该的那样，并填充应该填充的内容。问题是，当我尝试使用我在模板中定义的那些函数时，比如“selectFacet”、“useAny”和“remove”，它似乎什么都不做（但是警报工作并且具有正确的值）

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

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

及

。。。

现在，也许我遗漏了一些东西，但我认为这些元素应该绑定到视图模型中定义的变量，以便在对它们进行更改时，它会在这里更新。但将selectedItem从“”更改为单击的内容时，屏幕上似乎没有任何更改！将等参线从“真”切换到“假”时，不会隐藏、显示或更改任何内容

当我传入参数并使用相同的data bind=“text:name”代码看起来很好，但没有使用几乎相同的：data bind=“text:selectedItem”代码进行更新时，我被弄糊涂了

---

我的视图模型中是否遗漏了一个步骤或出错？

您将

isOpen

和

selectedItem

定义为

ko.observatable

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

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

同样，当您想要获得这些值时：

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

因此，我已更改了您的代码以修复这些问题，并且它似乎可以正常工作：

ko.components.register（'text-list'{
viewModel:函数（参数）{
var self=这个；
//资料
this.name=ko.observable（参数名称）；
this.info=params.info；
this.items=params.items；
this.isOpen=ko.可观察（真）；
this.selectedItem=ko.可观察（“”）；
//行为
this.selectFacet=功能（项目）{
self.selectedItem（项目）；
self.isOpen（假）；
}.约束（本）；
this.useAny=函数（）{
self.selectedItem（'Any'）；
self.isOpen（假）；
}.约束（本）；
this.remove=函数（）{
self.selectedItem（“”）；
self.isOpen（真）；
}.约束（本）；
},
模板：
“
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
使用任意时间（&T）\
\
\
删除&次\
\
\
\
\
\
\
\
\
\
\
\
\
\
'
});
var textListViewModel=函数（）{
this.name='测试段'；
this.info='这是一个工具提示'；
this.items=['item 1'、'item 2'、'item 3']；
};
//申请
self.isOpen();
self.selectedItem();