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

Question

在此示例中，我想使用 knockout.js 来允许单击“展开”链接并将其文本更改为“折叠”。我还想设置使 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>

Answer 1

这对于 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());
    };
};

http://jsfiddle.net/madcapnmckay/XAzW6/

希望这可以帮助。