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