0

この例では、knockout.jsを使用して、[展開]リンクをクリックし、そのテキストを[折りたたみ]に変更できるようにします。また、jobDetailsセクションを表示するように設定したいと思います。これは、クリックハンドラーを使用してリスト内の「現在の」アイテムのDOMを具体的に変更するためにknockout.jsを取得する方法に関する非常に一般的な質問です。

<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>
4

1 に答える 1

0

これは 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/

お役に立てれば。

于 2012-05-14T04:23:40.993 に答える