javascript - 不显示 'ko with'则显示不同的内容

Question

我正在使用以下删除代码来显示对象的属性。使用 with 我可以检查此对象中的属性是否存在。

<!-- ko with: Bunk1 -->
<div data-bind="css: Color">
    <div class="row no-margin">
        <div>
            <div data-bind="text: Name"></div>
            <div data-bind="text: FirstName"></div>
        </div>
    </div>
</div>
<!-- /ko -->

这是模型:

var viewModel = function () {
    var self = this;
    self.Bunk1 = ko.observable();
    self.Bunk2 = ko.observable();
    ...

    ...

    // 'val' is loaded with $.ajax 
    // this code might not be executed and  Bunk1 can fail to initialize.
    var model = new BunkModel();
        model.initModel(val);
        self.Bunk1(model);

    ...
}

function BunkModel() {
    var self = this;
    self.Color = ko.observable();
    self.Name= ko.observable();
    self.FirstName= ko.observable();

    self.initModel = function (values) {
        self.Color(self.mapColor(values.color));
        self.Name(values.name);
        self.FirstName(values.firstName);
    }
}

如果没有数据，我想做的是显示一个替代的 div，类似于 ko with 的 else .我如何绑定(bind)对象属性，但如果它们不存在则显示替代数据。

Answer 1

在不传递值的情况下创建新的可观察对象时，其值将为undefined。这意味着您可以简单地在现有的 with block 下面添加一个条件 block :

<!-- ko if: Bunk1() === undefined -->
content here
<!-- /ko -->

请注意，在进行这样的比较时需要使用括号，Bunk1 === undefined 将检查 observable 本身是否为 undefined 而不是其基础值。