@Html.Partial 之后的 Ko 绑定不起作用答案

【问题标题】：Ko Bindings after @Html.Partial do not work@Html.Partial 之后的 Ko 绑定不起作用
【发布时间】：2019-01-09 12:52:07
【问题描述】：

我有如下代码cshtml

<div class="container-fluid" id="dvUserData">
    <div class="tab-pane fade" id="documentos" role="tabpanel" aria-labelledby="documentos-tab">
                    @Html.Partial("Documentos")
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-primary botao-vert" data-bind="click: editData">SALVAR</button>
                    </div>
                </div>

和下面的绑定

ko.applyBindings(model, document.getElementById("dvUserData"));

但是我的 data-bind="click:editData" 不起作用，点击没有执行。但是，如果我将 div class="col-md-3" 放在 @Html.Partial("Documentos") 之前，则绑定工作。

我不知道为什么，我在这里寻找帖子但找不到类似的东西。提前感谢您的帮助。

---已编辑

部分

<div class="row" id="dvDocument">
    <form role="form">
        <div class="row">
            <div class="col-12">
                <table class="table tabela-documentos">
                    <tbody data-bind="foreach: documentsReturn().documentTypes">
                        <tr class="bg-cinza">
                            <td>
                                <div class="aviso-sucesso" data-bind="visible : hasAllDocuments()"></div>
                                <div class="aviso-critica" data-bind="visible : !hasAllDocuments()"></div>  <span data-bind="text: Description"></span>
                            </td>
                            <td>
                                <span class="d-none" data-bind="value: IdTypeDocument"></span>
                                <a class="btn btn-secondary" data-bind="click: function () { $parent.saveTypeDocument(IdTypeDocument); $('.alerta-form2').hide();}" data-toggle="modal" data-target="#modalDocumento">
                                    ADICIONAR
                                </a>
                            </td>
                        </tr>
                        <!-- ko foreach: DocumentsArray() -->
                        <tr>
                            <td><i class="fa fa-file-text-o" aria-hidden="true"></i> Inclusão: <span data-bind="text: NewDate"></span></td>
                            <td>
                                <i class="fa fa-times pointer" data-toggle="modal" data-target="#modal-confirmation" aria-hidden="true" data-bind="visible : !frombase(),
                                                       , click: function(){ @*if (confirm('Deseja realmente deletar o documento?')) {*@ $parent.savePath(Path); @*}*@ }"></i>
                            </td>
                        </tr>
                        <!-- /ko-->
                    </tbody>
                </table>

            </div>
        </div>
        <div class="alert-button">

        </div>
    </form>
</div>

我忘了提到我有另一个 javascript 文件将 div 文档与不同的模型绑定。

【问题讨论】：

您的 Partial 中有任何未关闭的标签/其他损坏的 HTML？将其运行到 W3C 验证器以确保...
我找不到问题。所有绑定都是正确的，并且部分 HTML 上的 div 已关闭
你能显示部分代码吗？
请发布部分代码，如果它不是很大，或者你的模型声明也是
抱歉耽搁了

标签： javascript html razor knockout.js

【解决方案1】：

按 F12 并检查是否有任何淘汰赛 js init (ko.applyBindings) 错误。如果有的话，修复它并尝试。

如果不存在错误，请确保您已通过调试代码为 model.Name() 属性设置了一个值。

并检查您的局部视图，看看您是否已将范围/绑定上下文缩小到模型的另一个复杂属性，该属性也具有 Name 属性。

如果你能提供更多关于局部视图绑定声明以及你如何设置/加载初始值到你的模型的信息会更好。

【讨论】：

【解决方案2】：

在寻找解决方案并与一些朋友交谈后，我发现了问题所在。我正在绑定具有 div id "documentos" 和其他信息的主要 div，这就是问题所在。我删除了 dvUserData 的绑定，并将绑定放入我拥有的所有 div 中，包括为按钮创建一个新的 div。

这就是我的 div "documentos" 现在的样子。

<div class="tab-pane fade" id="documentos" role="tabpanel" aria-labelledby="documentos-tab">

                        @Html.Partial("Documentos")
                        <div class="alert-button mb-3">
                            <div id="dvDocumentValidate">
                                <button type="submit" class="btn btn-primary botao-vert" data-bind="click: editData">SALVAR</button>
                            </div>
                        </div>
                    </div>

还有我的绑定

ko.applyBindings(model, document.getElementById("dvLoading"));
ko.applyBindings(model, document.getElementById("personaldata"));
ko.applyBindings(model, document.getElementById("address"));
ko.applyBindings(model, document.getElementById("databank"));
ko.applyBindings(model, document.getElementById("dvDocumentValidate"));
ko.applyBindings(model, document.getElementById("corporatedata"));

【讨论】：