我在这里制作了一个组件:
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">×</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">×</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 模型中搞砸了某些东西?
最佳答案
您将 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">×</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">×</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>
关于javascript - 绑定(bind)在 Knockout.js 中的组件内部不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32730424/