正确使用data-bind visible属性

时间:2013-10-20 21:24:23

标签: javascript jquery knockout.js

我有一个视图,根据类型显示来自foreach循环的不同类别的数据。每个类别将包含许多用户 - 我创建了一个对象,该对象将检查一个类别中的用户数是否超过10,然后将显示可见绑定的文本。对于不超过10的类别,它不会显示文本。

我的问题:如果第一个类别没有10,那么它不显示文本是否意味着它也不会显示其余类别的文本?

帮助:即使某个类别包含的内容超过10个且不确定原因,可见绑定也无效。

这是我的JSFiddle:http://jsfiddle.net/xNdJk/1/

JavaScript的:

var userViewModel = function (data) {
        var _self = this;
        _self.Name = ko.observable(data.Name);
        _self.Letter = ko.observable(data.Letter);
        _self.ShowLetter = ko.computed(function () {
            return (roleViewModel.UserCount > 13);
        });
    };

var typeViewModel = function (data) {
        var _self = this;
        _self.ContentType = ko.observable(data.ContentType);
        _self.Name = ko.observable(data.Name);
        _self.Rank = ko.observable(data.Rank);
        _self.UserCount = ko.observable(data.UserCount);
        _self.Users = ko.observableArray([]);
    };

查看:

<div class="collapse in" data-bind="template: { name: 'list', foreach: $data.Users }">

</div>
<div id="letter" data-bind="visible:ShowLetter, text: Letter"></div>

1 个答案:

答案 0 :(得分:2)

你正在混合类和实例,你已经创建了一个secondModel类,但你从来没有实例化,这是一个有效的例子

http://jsfiddle.net/xNdJk/2/

var viewModel = function(){        
    this.Letter = ko.observable('Hello, World!');
    this.secondModel = new secondModel();

    this.shouldShowMessage = ko.computed(function() {
        return (this.secondModel.UserCount() > 13);
    }, this);
}

var secondModel = function(){
    var self = this;
    self.UserCount = ko.observable(153);
}