0

我是 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 按钮时，每个列表项中的所有评论框都变得可见。我只想显示单击按钮的评论框。

需要一些帮助。

谢谢

4

1 回答 1

1

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

这是我为制作一个有点工作的示例所做的（请注意，这使用父绑定，可能不是您想要的）：

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 中引用的那些属性创建一个过滤的项目对象，并用它们填充过滤的项目可观察数组。

这可能看起来像这样：

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/

于 2013-07-26T06:11:00.770 回答