1

我正在使用淘汰赛 2.2.1，并且我有一个以表格方式显示数据的页面（使用 div 而不是表格），并且它具有三个列。左栏有一个“显示更多”链接，单击它时中间栏应该展开。

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

如果您只想在任何时候为单个项目“显示更多”，那么您需要在视图模型中跟踪当前选定的项目。然后，您可以使用它来评估是否应为每个项目显示“显示更多”列。

一个简化的例子。

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视图模型的属性。单击事件的处理程序传递当前项。
  • “更多” div 有一个可见的绑定设置到isSelected父视图模型上的函数。在这种情况下，我们需要使用特殊$data变量显式传递当前项目。

http://jsfiddle.net/benfosterdev/fPhZQ/上的工作示例

另一种选择是isSelected为每个联系人设置一个 observable，但我更喜欢上面的解决方案。

于 2013-02-03T11:24:22.773 回答