Knockout JS可见属性绑定 [英] Knockout JS visible property binding
问题描述
我是KnockoutJS的新手,在我的应用程序中,我将可见属性设置为这样的div
< pre lang =HTML> < div class = cd-fail-message data-bind = visible:containerModel()。QlikViewData.Navigations.length = 0 > 未找到结果< / div >
但它显示异常,
未捕获TypeError:无法处理绑定visible:function(){return containerModel()。 QlikViewData.Navigations.length> 0}
消息:无法读取未定义的属性长度
这是我在JS中的viewmodel对象
function containerViewModel(){
mainViewModel = this ;
mainViewModel.isBusy = ko.observable( false );
mainViewModel.errorMessage = ko.observable( );
mainViewModel.containerModel = ko.observable(
{
HomeSettings:ko.observable(),
ERPData:ko.observable({HeaderText:' ',BodyText:' ',FooterText:' '}),
KPIData:ko.observable ({HeaderText:' ',BodyText:' ',FooterText:' ' }),
iJETData:ko.observable({HeaderText:' ',BodyText:< span class =code-string>' ',FooterText:' '}),
QlikViewData:ko.observable({HeaderText:' ',BodyText:' ',FooterText:' '}),
IDEAData:ko.observable({HeaderText:' ',BodyText:' ',FooterText:' '})
}
);
GET_AllContainer(mainViewModel);
}
function GET_AllContainer(mainView){
mainViewModel.isBusy(真跨度>);
$ .ajax({
url:hostApi + api_GetAllContainer,
contentType: json,
成功: function (结果){
mainView.containerModel(result);
mainViewModel.isBusy ( false );
},
错误: function (结果){
mainViewModel.errorMessage(result);
mainViewModel.isBusy( false );
}
});
}
此外我使用模板绑定数据序列,但如果数据为null将抛出异常,我该如何阻止?
< section class = cd-gallery >
< span class =code-keyword>< ul class = noPadding data-bind = 模板: {name:'Report-Tiles',foreach:containerModel()。QlikViewData.Navigations} > < / ul >
任何人都可以帮助我
谢谢
.ajax({
url:hostApi + api_GetAllContainer,
contentType: json,
成功: function (结果){
mainView.containerModel(result);
mainViewModel.isBusy( false );
},
错误: function (结果){
mainViewModel.errorMessage(result);
mainViewModel.isBusy( false );
}
});
}
此外我使用模板绑定数据序列,但如果数据为null将抛出异常,我该如何阻止?
< section class = cd-gallery >
< span class =code-keyword>< ul class = noPadding data-bind = 模板: {name:'Report-Tiles',foreach:containerModel()。QlikViewData.Navigations} > < / ul >
任何人都可以帮助我
谢谢
(关于你的第二个问题),
在将数据绑定到模板之前,你可以检查数据是否为空,如果它不为null则只绑定它,
< section class =cd-gallery>
<! - ko if:containerModel()。QlikViewData.Navigations!= null - >
< ul data-bind =template:{name:'Report-Tiles',foreach:containerModel()。QlikViewData.Navigations}>< / ul>
<! - / ko - >< / section>
Hi,
I am new to KnockoutJS and in my application i am setting the visible property to a div like this
<div class="cd-fail-message" data-bind="visible: containerModel().QlikViewData.Navigations.length = 0">No results found</div>
But its showing exception ,
Uncaught TypeError: Unable to process binding "visible: function (){return containerModel().QlikViewData.Navigations.length > 0 }"
Message: Cannot read property 'length' of undefined
This is my viewmodel object in JS
function containerViewModel() {
mainViewModel = this;
mainViewModel.isBusy = ko.observable(false);
mainViewModel.errorMessage = ko.observable("");
mainViewModel.containerModel = ko.observable(
{
HomeSettings: ko.observable(),
ERPData: ko.observable({ HeaderText: '', BodyText: '', FooterText: '' }),
KPIData: ko.observable({ HeaderText: '', BodyText: '', FooterText: '' }),
iJETData: ko.observable({ HeaderText: '', BodyText: '', FooterText: '' }),
QlikViewData: ko.observable({ HeaderText: '', BodyText: '', FooterText: '' }),
IDEAData: ko.observable({ HeaderText: '', BodyText: '', FooterText: '' })
}
);
GET_AllContainer(mainViewModel);
}
function GET_AllContainer(mainView) {
mainViewModel.isBusy(true);
$.ajax({
url: hostApi + api_GetAllContainer,
contentType: "json",
success: function (result) {
mainView.containerModel(result);
mainViewModel.isBusy(false);
},
error: function (result) {
mainViewModel.errorMessage(result);
mainViewModel.isBusy(false);
}
});
}
Also i am using template to bind a sequence of data, but if the data is null exception will be thrown, how can i prevent that?
<section class="cd-gallery">
<ul class="noPadding" data-bind="template: { name: 'Report-Tiles', foreach: containerModel().QlikViewData.Navigations }"></ul>
Can anyone please help me
Thanks
.ajax({ url: hostApi + api_GetAllContainer, contentType: "json", success: function (result) { mainView.containerModel(result); mainViewModel.isBusy(false); }, error: function (result) { mainViewModel.errorMessage(result); mainViewModel.isBusy(false); } }); }
Also i am using template to bind a sequence of data, but if the data is null exception will be thrown, how can i prevent that?
<section class="cd-gallery"> <ul class="noPadding" data-bind="template: { name: 'Report-Tiles', foreach: containerModel().QlikViewData.Navigations }"></ul>
Can anyone please help me
Thanks
(Regarding your second question),
Before binding data to template you can check if the data is null , and if it is not null then only bind it,
<section class="cd-gallery"> <!-- ko if: containerModel().QlikViewData.Navigations!= null --> <ul data-bind="template: { name: 'Report-Tiles', foreach: containerModel().QlikViewData.Navigations }"></ul> <!-- /ko --></section>
这篇关于Knockout JS可见属性绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!