Question

在这个例子中，我想使用knockout.js来点击“Expand”链接并将其文本更改为“Collapse”。我还想设置make 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/

希望这有帮助。

knockout.js - 使用模板修改列表中当前项目中的DOM（展开列表项子部分）

1 个答案: