Question

我正在尝试使用jQuery.UI选项卡创建包含动态选项卡的页面。我在我看来有这个代码：

<div id="tabs" class="tabs">
<ul data-bind='foreach: sites'>
    <li><a data-bind="attr: { href: site().tabIdLink}"><span data-bind="text: site().Name"></span></a></li>
</ul>
<!-- ko foreach: sites -->
<div data-bind="attr: { 'id': site().tabId }">
    <h3 data-bind="text: site().Name"></h3>
</div>
<!-- /ko -->

和这个视图模型：

function ViewModel(api) {
    var self = this;

    self.sites = ko.observableArray([]);    
    self.addSite = function (data) {
        self.sites.push(new Site(data));
    };        

    $.getJSON(api + "allsites", "", function (allSites) {
        var mappedData = $.map(allSites, function (item)
        {
            return new Site(item);
        });
        self.sites(mappedData);
        $("#tabs").tabs();
    });
}

function Site(data) {
    var self = this;
    self.id = data.Id;
    self.tabId = "tab_" + data.Id;
    self.tabIdLink = "#" + self.tabId;
    self.site = ko.observable(data);
}

所有工作，除了我无法在div标签上设置id属性。有什么建议吗？

Answer 1

site().tabId无法正常工作，因为site是一个包含原始数据对象并且不具有tabId属性的可观察对象，请考虑这样做$data.tabId 1}}或只是tabId

Answer 2

这将有效：

 <div data-bind="attr: { 'id': tabId }">

knockout.js和id的问题

2 个答案: