淘汰赛：模特功能没有开火

Question

敲击模型功能未在点击事件中触发

嗨，朋友们，

我有以下html代码，其模型绑定到div元素“bindingDiv”：

<div class="clear" id="bindingDiv">
    <div class="col-sm-8">
        <table class="table table-bordered table-hover" data-bind="visible: Documents().length > 0">
            <thead>
                <tr>
                    <th class="col-md-2">
                        Name
                    </th>
                    <th>
                        Display Name
                    </th>
                    <th style="max-width: .5% !important; min-width: .5% !important; text-align: center;
                        width: .5% !important;">
                    </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: Documents">
                <tr>
                    <td>
                        <span data-bind="text: Id, visible:false"></span>
                        <span data-bind="text: Name"></span>
                    </td>
                    <td>
                        <span data-bind="text: DisplayName"></span>
                    </td>
                    <td>
                        <img class="action" title="Tools" data-placement="right" data-toggle="popover" src="~/Content/images/tool.png"
                            alt="tool" />
                        <div class="actions" style="display: none;">
                            <ul class="action-links" style="min-width: 75px;">
                                <li><a class="tool tool-remove" data-bind="click: $root.deleteDocument">Delete</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

以下是模型对象：

function Document(data) {
    var self = this;

    self.Id = ko.observable(data.Id);
    self.Name = ko.observable(data.Document.Name);
    self.DisplayName = ko.observable(data.Document.DisplayName);
    self.Description = ko.observable(data.Document.Description);
    self.DocumentPath = ko.observable(data.Document.DocumentPath);
    self.DocumentTypeId = ko.observable(data.Document.DocumentTypeId);
};

var isBindingComplete = true;

function CourseDocumentModel(docs) {
    var self = this;
    self.Documents = ko.observableArray(ko.utils.arrayMap(docs, function (doc) { var d = new Document(doc); return d; }));

    self.addDocument = function (doc) {
        var document = new Document(doc);
        self.Documents.push(document);
    };

    self.reloadDocuments = function(docs) {
        self.Documents.removeAll();
        ko.utils.arrayMap(docs, function (doc) { self.Documents.push(new Document(doc)) });
    };

    self.deleteDocument = function(doc) {
        if (!isBindingComplete) {
            return;
        }
        alert(ko.toJSON(doc));
        var conf = true;
        conf = confirm("Are you sure you want to delete?");
        if (conf) {
            $.ajax({
                type: "POST",
                url: "@Url.Action("DeleteDocument", Controllers.Course)/",
                data: ko.toJSON(doc),
                contentType: 'application/json',
                success: function (mydata) {
                    self.Documents.remove(doc);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("removeDocument method error status: " + xhr.status);
                    alert("removeDocument method error thrown: " + thrownError);
                }
            });                
        }
    };
};

$(document).ready(function() {
        refreshGrid(null);
    });

var model;

function refreshGrid(uploadRow)
{
    isBindingComplete = false;

    $.ajax({
        url: "@Url.Action("GetAllDocuments", Controllers.Course)/",
        type: "get",
        contentType: "application/json",
        success: function (docs) {
            if(model == null)
            {
                model = new CourseDocumentModel(docs);
                ko.applyBindings(model, document.getElementById("bindingDiv"));
            }
            else
            {
                model.reloadDocuments(docs);
            }

            if(uploadRow != null)
                $(uploadRow).fadeOut();

            refreshPopover();

            isBindingComplete = true;

        },
        error: function (xhr, ajaxOptions, thrownError) {
            //alert("refreshGrid error status: " + xhr.status);
            //alert("refreshGrid error thrown: " + thrownError);
            isBindingComplete = true;
        } 
    });
}

我在这里遇到两个问题：

1. 模型CourseDocumentModel中定义的deleteDocument方法会自动触发绑定的文档数。我不确定当从regreshGrid方法执行ko.applyBindings（model，document.getElementById（“bindingDiv”））时是如何触发此事件的。因此，作为一种解决方法，我使用了一个标志来确定绑定是否已完成

2. 绑定后，如果单击html代码中的“删除”按钮，则模型函数deleteDocument不会触发。我在控制台（Firebug）中没有看到任何问题。我用谷歌搜索并发现了$ root.deleteDocument（$ data）的建议，但问题仍然存在。你能指导我解决这个问题吗？

谢谢， 与Hemant。