Question

我是Knockout js的新手，我在按钮点击事件中发现了一个问题。我有一个列表，其中每个列表项都有一个注释按钮。单击按钮时，应显示不可见的注释框。以下是我的HTML代码：

<ul class="unstyled list" data-bind="foreach: filteredItems">
    <li>
        <input type="checkbox" value="true"  data-bind =" attr: { id: id }"  name="checkbox" class="checkbox">
        <label class="checkbox-label" data-bind="text: title, attr: { for: id }"></label>
        <button class="pull-right icon" data-bind="click: loadComment, attr: { id: 'btn_' + id }"><img src="../../../../../Content/images/pencil.png" /></button>
        <div class="description" data-bind="visible: commentVisible, attr: { id : 'item_' + id}">
            <textarea data-bind="value: comment" class="input-block-level" rows="1" placeholder="Comment" name="comment"></textarea>
            <div class="action">
                <button class="accept" data-bind="click: addComment">
                    <img src="../../../../../Content/images/accept.png" /></button>
                <button class="cancel" data-bind="click: cancel">
                    <img src="../../../../../Content/images/cancel.png" /></button>
            </div>
        </div>
    </li>
</ul>

在我的视图模型中，我提到点击loadComment评论应该是可见的

var filteredItems = ko.observableArray([]),
    filter = ko.observable(),
    items = ko.observableArray([]),
    self = this;

self.commentVisible = ko.observable(false);
self.comment = ko.observable();
self.addComment = ko.observable(true);
self.cancel = ko.observable();

self.loadComment = function (item) {
    self.commentVisible(true);
}

问题是当我单击loadComment按钮时，每个列表项中的所有注释框都可见。我想只显示点击按钮的评论框。

需要一些帮助。

由于

Answer 1

你的声明对我来说没什么意义。 commentVisible不是filteredItems的属性，因此在执行foreach时，除非您使用$parent绑定，否则无法访问它。 FilteredItems本身是一个私有变量，不会暴露给viewmodel，这会导致绑定失败。我会查看错误控制台，看看是否有任何线索。

这是我做了一个有点工作的例子（注意，这使用父绑定，可能不是你想要的）：

var VM = (function() {
    var self = this;

    self.filteredItems = ko.observableArray([{id: 1, title: 'Test'}]);
    self.filter = ko.observable();
    self.items = ko.observableArray([]);
    self.commentVisible = ko.observable(false);
    self.comment = ko.observable();
    self.addComment = ko.observable(true);
    self.cancel = function(){
        self.commentVisible(false);
    };

    self.loadComment = function (item) {
        self.commentVisible(true);
    }
    return self;
})();

ko.applyBindings(VM);

http://jsfiddle.net/infiniteloops/z93rN/

敲除绑定上下文：http://knockoutjs.com/documentation/binding-context.html

您可能想要创建一个过滤的项目对象，其中包含在foreach中引用的那些属性，并使用它们填充filteredItems obeservable数组。

这可能看起来像这样：

var FilteredItem = function(id,title){
    var self = this;    
    self.id = id;
    self.title = title;
    self.commentVisible = ko.observable(false);
    self.comment = ko.observable();
    self.addComment = ko.observable(true);
    self.cancel = function(){
        self.commentVisible(false);
    };    
    self.loadComment = function (item) {
        self.commentVisible(true);
    }
}

var VM = (function() {
    var self = this;
    var item = new FilteredItem(1, 'Test');
    self.filteredItems = ko.observableArray([item]);
    self.filter = ko.observable();
    self.items = ko.observableArray([]);

    return self;
})();

ko.applyBindings(VM);

http://jsfiddle.net/infiniteloops/z93rN/2/

Knockout点击事件可见状态

1 个答案: