正确使用data-bind visible属性

Question

I have a view that displays data from a foreach loop in different categories depending on the type. Each category will contain a number of users - I created an object that will check to see if the number of users in a category are more than 10 then the text for the visible bind will show. And for the category that doesn't have more than 10 it will not show the text.

My question: if the first category doesn't have 10 it won't show text does that mean that it won't also show text for the remaining categories?

Help with : the visible binding is not working even though a category would contain more than 10 and not sure why.

Here is my 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([]);
    };

View:

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

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

Answer 1

You are mixing classes and instances, you have created a secondModel class but you never instance it, here is a working example

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);
}