Error when use Knockout.js conditional block with observableArray length

Question

As you can see in post title I'm trying to use conditional block with condition of observableArray length. Unfortunately it's not working (actually when I check observableArray length it always shows 0) and error said:

Uncaught ReferenceError: Unable to process binding "if: function (){return usersets().length === 0 }" Message: usersets is not defined.

Here is the markup:

<div data-bind="foreach: usersets" id="user_sets">
            <!-- ko if: usersets().length === 0 -->
            <p id="noSets">Пока у вас нет личных комплектов. Напишите стилисту или просто добавьте подходящий комплект в избранное</p>
            <!-- /ko -->
            <div class="block">
                <input type="hidden" data-bind="value: $data.SetId" />
                <div class="fav" data-bind="css: { fullop: $data.IsFavorite == true }">
                    <img alt="" src="img/fav.png" data-bind="click: $root.setFavorite">
                </div>
                <div>
                    <img alt="" data-bind="attr: { src: $data.SetImg }">
                </div>
                <div class="txt">
                    <h3 data-bind="text: $data.SetName, click: $root.go"></h3>
                    <p><span data-bind="text: $data.ItemsNumber + ' вещей,'"></span><span data-bind="    text: ' общая цена ' + $data.SetPrice + ' руб'"></span></p>
                </div>
            </div>
        </div>

And this is hwi ViewModel looks:

<script>
        function SetsViewModel() {
            var self = this;
            self.usersets = ko.observableArray();
            self.setFavorite = function (data) {
                if (data.IsFavorite == true) {
                    action = "DELETE";
                    $.ajax({
                        type: action,
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8',
                        url: "/api/setlikes/" + data.SetId + "/" + $("#MainContent_guid").val(),
                        data: {},
                        success: function () {
                            window.location.reload();
                        },
                        error: function (xhr, status, error) {
                            var err = eval("(" + xhr.responseText + ")");
                            alert(err.Message);
                        }
                    });
                }
                if (data.IsFavorite == false) {
                    var j = '{"UserID":"' + $("#MainContent_guid").val() + '", "SetID":"' + data.SetId + '", "IsFavorite": true}';
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8',
                        url: "/api/setlikes",
                        data: j,
                        success: function (data) {
                            window.location.reload();
                        },
                        error: function (xhr, status, error) {
                            var err = eval("(" + xhr.responseText + ")");
                            alert(err.Message);
                        }
                    });
                }
            }
            self.go = function (data) {
                window.location.replace("http://www.prepp.me/set/" + data.SetId);
            }
            $.getJSON("/api/sets?username=" + $("#MainContent_guid").val(), self.usersets);
        }

Yooz · Accepted Answer · 2014-10-15 04:11:01Z

1

You are trying to access usersets in a usersets lookup, because in the foreach loop, the scope is the current usersets item.

Try

<!-- ko if: $root.usersets().length === 0 -->
//or
<!-- ko if: $parent.usersets().length === 0 -->

answered Oct 15, 2014 at 4:11

Yooz

2,51823 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

andrey.shedko Over a year ago

Yes, thanks, it's working. Can I use conditional block outside foreach?

Yooz Over a year ago

Yes, of course. the Conditional "if:" can be used anywhere in the page. Make sure you follow the scope, $root is the model, you can define the scope with the "with:" statement, Knockout doc is pretty clear about scoping.

Collectives™ on Stack Overflow

Error when use Knockout.js conditional block with observableArray length

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related