javascript - Knockoutjs 正确绑定(bind)但是标签上的 href 不会重定向到页面

Question

我有这个 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>

使用 knockoutjs 在顶部创建了我的菜单，它完美地工作并且 a 标签上的 href 属性被正确填充，如 href="/site/models# {"catId": "76b4a8ed-1350-46af-8184-3b68029cbd22"}" 但是，当我点击该项目时，它不会重定向到新页面。我的第一个想法可能是因为哈希，但事实并非如此，所以我尝试对任何 _self 和所有其他它不起作用的属性使用 target 属性。所以我的下一个猜测是有一个 javascript 方法覆盖了它，到目前为止我还没有找到任何东西。所以我的问题是为什么它不起作用？

KnockOut View 模型:

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

更新

我不得不说，当我右键单击该项目并在新窗口中打开时，它确实有效并显示了该页面，但它无法直接左键单击。

Answer 1

问题可能出在生成的 URL 中的引号中:

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

href 的值实际上是 "/site/models#{"，将 URL 的其余部分保留为无效的 HTML。

您可以尝试绑定(bind)到转义的 URL:

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