Question

我有一个使用KO渲染数据的应用程序。有时，由于没有可用数据，因此该特定元素的数据源不存在，在这种情况下，我想完全隐藏div。我似乎无法让这个工作。我在同一个项目的另一个JS文件中工作，在那里我检查hasOwnProperty（）并存储为bool。

app.namespace('app.blocks.estimate');

app.blocks.estimate = (function() {
    var blocks = {
        "app.block.estimate": {
            viewModel: function(params) {
                var self = this;

                self.hasData = ko.computed(function() {
                    return this.dataset.data.Total()[0].total() !== null;
                }, app.model.get())

                self.total = ko.observable(app.model.get().dataset.data.Total()[0].total());

                self.gst = ko.observable(numeral(app.model.get().dataset.data.GST()[0].gst()).format('$0,0.00'));

                self.description = ko.observable();

            },
            template: 
            '<!-- ko if: hasData -->' + 
            '<div data-bind="tour: { title: \'Title\', content: \'Content.\', placement: \'left\' }">' +
            '<h1 class="text-right" data-bind="text: total()"></h1>' +
            '<h6 class="text-right">The total includes <b data-bind="text: gst()"></b> of GST.</h6>' +
            '</div>' +
            '<!--/ko-->'
        }
    };

    return {
        init: function() {
            app.blocks.register(blocks);
        }
    };
})(app);

app.blocks.estimate.init();

DOM仍显示

<!-- ko if: hasData-->
<div class="jumbotron" data-bind="tour: { title: 'Title', content: 'Description', placement: 'left' }">
    <h1 class="text-right" data-bind="text: total()"/>
    <h6 class="text-right">The total includes <b data-bind="text: gst()"/> of GST.</h6>
</div>
<!--/ko-->

即使我将其更改为以下内容，它仍会显示数据。

<!-- ko ifnot: hasData -->

敲除JS - 当数据源为空时隐藏元素

0 个答案: