Question

假设我在页面上有多个字段。当任何这些字段为空时，我想显示一条简单的消息。问题是当我加载带有空白字段的页面时，消息不会出现。但是，如果我更新某个字段以获取值然后将其删除，则会显示该消息。所以我知道绑定在那里，函数调用正在按预期工作。我的问题是为什么在加载页面时没有评估它？

函数“ContainsBlankLine（）”只是遍历所有字段并返回true或false。

HTML

<div class="row information" data-bind="visible: $root.ContainsBlankLine()() == true">
       <div class="col-filler">
           <span>One or more fields have been left blank.</span>
       </div>
</div>

代码

@section scripts{
<script type="text/javascript">
    $(function () {
        var vmCartIndex = function () { var self = this; };
        vmCartIndex = ko.mapping.childrenIndependently($.parseJSON('@Html.RawJsonForKoMapping(Model)'), ["Summary", "Header", "Items", "Footer"]);
        vmCartIndex.ContainsBlankLine = function () {
            return ko.computed({
                read: function () {
                    for (var i = 0; i < vmCartIndex.Items.ItemsList().length; i++) {
                        var item = vmCartIndex.Items.ItemsList()[i];
                        if (item.Field() == '')
                            return true;
                    }
                    return false;
                }
            }, vmCartIndex)
        };
        ko.applyBindings(vmCartIndex); 
 }); </script>

Answer 1

正如评论中提到的，您可以改进代码。 T.J. Crowder提到的每一点都是真的，并用他最初的小提琴来分叉（谢谢）

<强>视图模型：

var vmCartIndex = {
    Items: {
        ItemsList: ko.observableArray(
        [{
            Field: ko.observable("")
        }, {
            Field: ko.observable("")
        }, {
            Field: ko.observable("")
        }])
    }
};
vmCartIndex.ContainsBlankLine = ko.computed(function () {
    var result = ko.utils.arrayFirst(vmCartIndex.Items.ItemsList(), function (data) {
        if (!data.Field()) { //this bit identifies '',undefined,null
            return true;
        }
    });
    if (result) {
        return true;
    }
    return false;
}, vmCartIndex)

ko.applyBindings(vmCartIndex);

工作样本 here

Answer 2

在脚本中，字段的默认值为null而不是''。因此我第一次运行页面脚本比较

iex

永远不会过去。将脚本更改为以下内容解决了问题。

 if (item.Field() == '')
       return true;

在页面加载后敲除可见绑定但不是最初的

2 个答案: