1

私はノックアウト 2.2.1 を使用しており、データを表形式 (表ではなく div を使用) で表示するページがあり、3 つの列があります。左の列には「もっと見る」リンクがあり、クリックすると中央の列が展開されます。

HTML:

<div data-role="page" data-title="Search" role="main" id="caspSearch" >
        <header>
            <h2 >Search Results:</h2>
            <span>mobilty fy13</span>
            <p>(<span>25</span>)</p> 
        </header>

        <div class="caspGrid cafeClear">
            <div class="caspRow">
                    <div class="caspColEntity">
                        <span>Favorites</span>
                        <p>(<span>2</span>)</p>
                    </div>
                    <div class="caspColSummary">
                        <p>Test Data</p>
                        <p>Test Data</p>
                        <p>Test Data</p>
                    </div>
                    <div class="caspColTeam">
                        <p>Test Data</p>
                        <p>Test Data</p>
                        <p>Test Data</p>
                    </div>
                </div>  
                <!-- .caspRow -->

                <div class="caspRow">
                    <div class="caspColEntity">
                        <span>Strategies</span>
                        <p>(<span>5</span>)</p>
                      <!-- WHEN CLICKING THIS I WANT THE DIV WITH VISIBLE BINDING (in .caspColSummary) TO SHOW, BUT IT IS ALSO SHOWING THE ONE FROM THE LAST ROW SINCE IT HAS THE SAME BINDING-->
                        <h3 class="caspCollapsible caspRight" data-bind="click:$root.setVisible">Show More</h3>
                    </div>
                    <div class="caspColSummary">
                        <p>Test Data</p>
                        <p>Test Data</p>
                        <p>Test Data</p>

                        <div data-bind="visible:$root.visible">
                            <p>Test Data</p>
                            <p>Test Data</p>
                            <p>Test Data</p>
                        </div>
                    </div>
                    <div class="caspColTeam">
                        <p>Test Data</p>
                        <p>Test Data</p>
                        <p>Test Data</p>

                        <div data-bind="visible:$root.visible">
                            <p>Test Data</p>
                            <p>Test Data</p>
                            <p>Test Data</p>
                        </div>
                    </div>
                </div>  
                <!-- .caspRow -->
                            <div class="caspRow">
                    <div class="caspColEntity">
                        <span>Strategies</span>
                        <p>(<span>5</span>)</p>
                        <h3 class="caspCollapsible caspRight" data-bind="click:$root.setVisible">Show More</h3>
                    </div>
                    <div class="caspColSummary">
                        <p>Test Data</p>
                        <p>Test Data</p>
                        <p>Test Data</p>

                        <div data-bind="visible:$root.visible">
                            <p>Test Data</p>
                            <p>Test Data</p>
                            <p>Test Data</p>
                        </div>
                    </div>
                    <div class="caspColTeam">
                        <p>Test Data</p>
                        <p>Test Data</p>
                        <p>Test Data</p>

                        <div data-bind="visible:$root.visible">
                            <p>Test Data</p>
                            <p>Test Data</p>
                            <p>Test Data</p>
                        </div>
                    </div>
                </div>  
                <!-- .caspRow -->

        </div>

</div>

ビューモデル:

define(['ko', 'kopost', 'ca', 'sp/db'], function(ko, kopost, ca, db) {

    function SearchViewModel(ctx, data) {
        this.init(ctx, data);
    }

    SearchViewModel.prototype = new ca.ViewModel({});
    SearchViewModel.prototype.constructor = SearchViewModel;

    ko.utils.extend(SearchViewModel.prototype, (function() {

        var init = function(ctx, data){
            var self = this;    
            self.visible = ko.observable(false);    
            self.results = ko.observableArray();
            self.subscribeToTopic("caspSearch", self.search, self); 
        },


        setVisible = function(o,e){
            this.visible(!this.visible());
            $(e.target).toggleClass('caspOpen');
        };


        return {
                init: init,                 
                setVisible:setVisible

        }
    })());

    return SearchViewModel;
});

明らかに、この方法で可視を設定することは問題があります。これは、可視バインディングを持つすべての列を表示しているためです。必要な列のみを表示するように柔軟にするにはどうすればよいですか?

4

1 に答える 1

0

一度に 1つのアイテムを「もっと表示」したい場合は、ビュー モデル内で現在選択されているアイテムを追跡する必要があります。次に、これを使用して、各アイテムの [もっと見る] 列を表示する必要があるかどうかを評価できます。

簡単な例。

HTML:

<ul data-bind="foreach: contacts">
    <li>
        <span data-bind="text:name"></span>
        <a href="#" data-bind="click: $parent.selectContact">More</a>
        <div data-bind="visible: $parent.isSelected($data)"><span data-bind="text: age"></span></div>
    </li>
<ul>

JavaScript:

var contacts = [{
    name: "John",
    age: 30
}, {
    name: "Pete",
    age: 25
}, {
    name: "Jane",
    age: 23
}];

var ContactsModel = function (data) {
    var self = this;

    self.contacts = ko.observableArray(data);
    self.selectedContact = ko.observable();

    self.isSelected = function (item) {
        return self.selectedContact() && self.selectedContact() === item;
    };

    self.selectContact = function (item) {
        self.selectedContact(item);
    };
};

var model = new ContactsModel(contacts);
ko.applyBindings(model);

注意すべき重要事項:

  • 項目の [詳細] リンクをクリックするとselectedContact、ビュー モデルのプロパティが設定されます。クリック イベントのハンドラーには、現在のアイテムが渡されます。
  • "More" div にはisSelected、親ビュー モデルの関数に設定された可視バインディングがあります。この場合、特殊$data変数を使用して現在のアイテムを明示的に渡す必要があります。

http://jsfiddle.net/benfosterdev/fPhZQ/の作業例

別のオプションは、isSelected連絡先ごとに観察可能にすることですが、私の好みは上記の解決策です。

于 2013-02-03T11:24:22.773 に答える