Ko Bindings after @Html.Partial do not work

Question

I Have the following code 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>

and the following binding

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

But my data-bind="click: editData" does not work, the click is not performed. But if i put the div class="col-md-3" before the @Html.Partial("Documentos") the bindings work.

I have no idea why, I looked for posts here but could not find anything similar. Thanks in advance for any help.

---EDITED

The Partial

<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>

I forgot to mention that i have another javascript file that bindings the div document with a different model.

Answer 1

Press the F12 and check for any knockout js init (ko.applyBindings) error. If there is any, fix it and try.

If no error exist, then make sure you have set a value to the model.Name() property by debugging the code.

and check your partial view and see whether you have narrow down the scope/ binding context to another complex property of you model which also has the Name property.

It would be better if you could give more info about partial view binding declaration and the how you are setting / loading the initial values to your model.

Answer 2

After looking for the solution and talk with some friends i found out what was the problem. I was binding the major div, that had the div id "documentos", and another information, and this was the problem. I remove the binding of dvUserData, and put the binding in all the div that i had, including creating a new div just for the button.

This is how my div "documentos" is now.

<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>

And my bindings

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