List js-使用模板修改列表中当前项中的DOM（展开列表项小节）

在本例中，我想使用knockout.js来允许单击“Expand”链接，并将其文本更改为“Collapse”。我还想设置使jobDetails部分可见。这是一个非常普遍的问题，即如何让knockout.js使用单击处理程序专门修改列表中“当前”项的DOM

<script type="text/html" id="job-template">
    <div class="jobContainer">
        <label data-bind="text: JobTitle"></label> 
        <label data-bind="text: CompanyName"></label>
        <div class="jobDetails">
            <label data-bind="text: City"></label>
            <label data-bind="text: State"></label>
        </di>
    <div>
        <a class="expand" href="#" data-bind="click: ???">Expand</a>        
    </div>
    </div>    
</script>

---

这对于KO来说是非常直接的。这里有一个简单的方法。仅供参考，我必须稍微修改一下您的标记

<div>
    <div class="jobContainer">
        <label data-bind="text: JobTitle"></label>
        <label data-bind="text: CompanyName"></label>
        <div class="jobDetails" data-bind="visible: expanded">
            <label data-bind="text: City"></label>
            <label data-bind="text: State"></label>
        </div>
    <div>
    <a class="expand" href="#" data-bind="click: toggle, text: linkLabel">Expand</a>        
</div>   


var viewModel = function() {
    this.JobTitle = ko.observable("some job");
    this.CompanyName = ko.observable("some company");
    this.City = ko.observable("some city");
    this.State = ko.observable("some state");

    this.someValue = ko.observable().extend({ defaultIfNull: "some default" });

    this.expanded = ko.observable(false);

    this.linkLabel = ko.computed(function () {
        return this.expanded() ? "collapse" : "expand";
    }, this);      

    this.toggle = function () {
        this.expanded(!this.expanded());
    };
};

var viewModel=函数（）{
this.JobTitle=ko.observable（“某项工作”）；
this.CompanyName=ko.observable（“某公司”）；
this.City=ko.observable（“某个城市”）；
这个状态=可观察的（“某些状态”）；
this.someValue=ko.observable（）.extend（{defaultIfNull:“somedefault”}）；
this.expanded=ko.可观察（假）；
this.linkLabel=ko.computed（函数（）{
返回此.expanded（）？“collapse”：“expand”；
}，这个）；
this.toggle=函数（）{
this.expanded（！this.expanded（））；
};
};

---

希望这能有所帮助。

感谢您的回复！这正是我要寻找的，然而，我在firebug控制台中得到一个JavaScript错误，告诉我没有定义“切换”。整个区块是否在knockout.js html模板中？如果它在模板绑定中显示为foreach的一部分，请尝试使用$parent.toggle。这将引用父viewmodel。我将代码从模板移到包装标记中，但由于某些原因，jobDetails可见性没有收到要展开的回调。展开/折叠文本正在更改，但细节的可见性没有正确切换。因此我解决了问题。我在jobDetails类上有一个“display:none；”css属性，我想它在所有情况下都会覆盖可观察对象的可见性。非常感谢你的帮助@阿达姆莱维特-酷。实际上，我刚刚用一个item类（）和一个父处理函数（）构建了一个foreach示例。如果这回答了你的问题，别忘了将其标记为已回答。