Question

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

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;
});

显然以这种方式设置可见是有问题的，因为它显示所有具有可见绑定的列，如何使其灵活，以便它只显示我需要的列？

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

http://jsfiddle.net/benfosterdev/fPhZQ/

的工作示例

另一个选择是为每个联系人提供isSelected观察，但我的偏好是上面的解决方案。

淘汰赛：如何让一个观察者影响到另一个？

1 个答案: