CODEWITHSUNDEEP
javascripthtmlknockout.js
Masoud Andalibi
Masoud Andalibi

Reputation: 3228

Knockoutjs binds correctly however href on a tag doesn't redirect to the page

I have this html:

<ul class="nav nav-tabs ilia-cat-nav" data-toggle="dropdown" data-bind="foreach : Items" style="margin-top:-30px">
    <li role="presentation" data-bind="attr : {'data-id' : ID , 'data-childCount' : Children().length}" style="padding-left: 20px; padding-right: 20px;  text-align: center; color: white" class="active-li">
        <label id="menu1" data-toggle="dropdown" data-bind="text: Name"></label>
        <ul class="dropdown-menu" data-bind="foreach: Children" role="menu" aria-labelledby="menu1">
            <li role="presentation"><a role="menuitem" data-bind="text: Name, attr: { 'href': Url} "></a></li>
        </ul>
    </li>
</ul>

That creates my menu on top using knockoutjs, it works perfectly and href attribute on a tag is filled correctly like href="/site/models#{"catId": "76b4a8ed-1350-46af-8184-3b68029cbd22"}" however when i click on the item, it doesn't redirect to new page. my first thought was maybe its because of hash but it wasn't, so i tried to use target attribute for any of the _self and all others it doesn't work. so my next guess was that there is a javascript method overriding this, so far i haven't found anything. so my question is why doesn't it work?

KnockOut ViewModel:

landing.dataModels.Category = function (_id, _categoryTypeId, _name, _description, _parentId, _children) {

    var self = this;

    this.ID = ko.observable(_id);
    this.CategoryTypeId = ko.observable(_categoryTypeId);
    this.Name = ko.observable(_name);
    this.Description = ko.observable(_description);
    this.ParentId = ko.observable(_parentId);
    this.Url = ko.computed(function () {
        return '/site/models#{"catId": "' + self.ID() + '"}';
    });
    this.Children = ko.observableArray([]);
    this.getChildren = ko.computed(function () {
        return self.Children();
    });
    _.each(_children, function (item) {
        self.Children.push(new landing.dataModels.Category(item.ID, item.categoryTypeId, item.Name, item.Description, item.ParentId, item.Children));
    });
};

Update

I have to say that when i right-click on the item and open in new window it does work and shows the page, but its not working on direct left click.

Upvotes: 3

Views: 1401

Answers (2)

Philip Bijker
Philip Bijker

Reputation: 5115

Probably the problem is in the quotes in the generated URL:

href="/site/models#{"catId": "76b4a8ed-1350-46af-8184-3b68029cbd22"}"

The value for href is actually "/site/models#{" leaving the rest of the URL as invalid HTML.

You could try to bind to the escaped URL:

this.Url = ko.computed(function () {
    return encodeURI('/site/models#{"catId": "' + self.ID() + '"}');
});

Upvotes: 2

Masoud Andalibi
Masoud Andalibi

Reputation: 3228

Finally i got tired and i just went with a simple jquery click to make it work:

    $(document).ready(function () {
        setTimeout(function () {
            $(document).on("click", ".ilia-catLink", function () {
                var a = $(this).attr("href");

                window.location = a;
            });
        }, 100);

It works this way, but i still wonder why wouldn't that href work on itself.

Upvotes: 1

Related Questions