Question

我已经搜索过，找到了旧的答案，并且手动清除了bidnigns，然后调用了applybindings ......以及创建了一个与其他任何东西没有直接关系的自定义viewmodel，并在新的后面应用了绑定dom节点出现。

我的具体情况是，在调用show之后，bootstrap3模态基本上会重新附加自身，同样模态中的所有项目实际上都没有绑定。

我已经有一个代表对话框状态/属性的模型，但我希望dialogviewmodel成为我的pageViewModel的子代。

我的问题是，在这个时间点，最适合的方法是什么？有没有办法说这个节点，将它附加到此属性的viewmodel？

Answer 1

我使用与您相同的工具（knockout和bootstrap3）。这就是我以Modals为例的例子：

此div作为index.html中正文的第一个元素存在：

<div class="modal fade" id="BaseModal" tabindex="-1" role="dialog" aria-labelledby="BaseModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div id="modalLoading" class="ajax-loader">
        <img src="images/working_blue.gif" />
    </div>
    <div class="modal-dialog modal-lg">
        <div id="ModalAnchor" class="modal-content col-lg-4 col-lg-offset-4" data-bind="html: $data.ModalContent"></div>
    </div>
</div>

// This is typescript but the javascript should be pretty close to this.
private LoadModalView(viewName: string, viewModel: any): void {
    $.get(viewName)
        .then((view: any, status: string, jxhr: JQueryXHR) => {
            this.ModalContent(''); // ensure there is no content in the modal.
            this.ModalContent(view); // Load new HTML
            ko.applyBindingsToDescendants(viewModel, this.ModalAnchor[0]); // bind new modal viewmodel
            this.BaseModal.modal('show'); // Open the modal
        }, (view: any, status: string, jxhr: JQueryXHR) => { /*Do error handling*/ });
}

编辑：以下是我加载到模态中的HTML示例：

<div class="modal-header">
    <h3 data-bind="text: $data.Header"></h3>
</div>
<div class="modal-body">
    <h5 data-bind="text: $data.Message"></h5>
</div>
<div class="modal-footer">
    <button id="OK" class="btn btn-primary center-block" data-bind="click: OK, text: ButtonText" />
</div>

在LoadModalView函数中，ViewModel参数是一个viewmodel，用于表示新模态的新数据/内容/等。

在模态视图模型中，我称之为隐藏＆＃39;关于模式的用途。

我希望这有帮助！我不知道它是否是正确的＆＃39;或者＆＃39;适当的＆＃39;这样做的方法，但这是我的模式。

Knockout 3.2 applyBindings到新的dom节点

1 个答案: