如何通过绑定显示或隐藏div

时间:2013-04-29 19:01:21

标签: knockout.js

例如:

在viewModel中,

//Makes webApi call to get the data from some repository
function GetData() {
            var data = http.get(apiUrl)
            .success(function (result) {
                 if (result != null || result !='')
                 {
                    // success display the data
                    vm.dataDisplay;
                 }
               else {
                    vm.errorMsg('No data');

                }
            })

//视图模型

 var vm = {
            activate: activate,
            dataDisplay: ko.observableArray(),
            errorMsg:ko.observable(''),
           };
        vm.activate();
        return vm;

//图。 预期

If( errorMsg == 'No Data')
{
// show errordata div and hides displayData div
<div class="errorData" data-bind="text:errorMsg"/>
}
else
{
// Show displayData div and hide errorData div
<div class="displayData" data-bind="text:dataDisplay" />
}

如何通过绑定实现这个?

我可以使用ko attr或者可见。 但我的要求是仅通过绑定隐藏/显示。 请建议我怎么做? 在此先感谢。

2 个答案:

答案 0 :(得分:11)

你是对的,你只需要使用visible绑定,如果observable的值不是null,undefined或空字符串,它只显示HTML元素。这应该有效:

<div class="errorData" data-bind="visible: errorMsg, text:errorMsg"/>

<div class="displayData" data-bind="visible: dataDisplay, text:dataDisplay" />

此外,如果“dataDisplay”确实是一个数组,则必须使用:

<div class="displayData" data-bind="visible: dataDisplay().length, text:dataDisplay" />

答案 1 :(得分:0)

使用此方法,因为它可以帮助您解决您尝试实施的内容

self.ClickLoad=ko.observable(false);
self.Enable=ko.observable();
Enable=function(){
    self.ClickLoad=ko.observable(true);
    console.log(self.ClickLoad);
}

<div data-bind="visible: Enable()">
    <p>sjknscjksnajcn</p>
</div>