knockout.js - 如何通过绑定(bind)显示或隐藏div

Question

例如:

在 View 模型中，

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

                }
            })

// View 模型

 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" />
}

如何通过绑定(bind)来实现？

我可以使用 ko attr 或可见。
但我的要求是仅通过绑定(bind)隐藏/显示。
请建议我如何做到这一点？
提前致谢。

Answer 1

你是对的，你只需要使用 visible 绑定(bind)，仅当 observable 的值不是 null、未定义或空字符串时才显示 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" />