淘汰赛两种方式绑定不适用于 Sharepoint 模式对话框

Question

我正在尝试使用共享点模式对话框进行两种方式的绑定（敲除 observables）

    var ViewModel = function () {
    var self = this;
    self.firstName = "Irfanullah";
    self.lastName = ko.observable('M.');
    self.fullName = ko.computed(function () {
        return self.firstName + ' ' + self.lastName();
    });
};
ko.applyBindings(new ViewModel());


<button type=button onclick="openDialog2()">click me</button>
<div id="wrap" style="display:none">
<div id="d10" class="dialogHolder">
    <div id="kobasic">
        <h4>Editable data</h4>
        <p><input type="text" data-bind="value: firstName" /></p>
        <p><input type="text" data-bind="value: lastName" /></p>
        <p>Full Name: <span data-bind="text: fullName"></span></p>
    </div>
</div>

当我在 sharepoint wiki 页面上测试此代码时，它运行良好，但是当我在 sharepoint 对话框上使用相同的代码时，它显示值（单向绑定）但两种方式绑定/ko.observable() 不起作用（当我键入姓氏文本框中的某些内容不会更新全名）

 function openDialog2() {
    var e = document.getElementById('d10');
    var options = {
        title: "Test Knockout",
        width: 700,
        height: 800,
        html: e.cloneNode(true) 
    };
    mydialog = SP.UI.ModalDialog.showModalDialog(options);
}

我相信这一切都是因为 e.cloneNode(true) 但我无法找出替代解决方案

Answer 1

对于 SharePoint 对话框，我使用这种方法： （注意：需要 jQuery）

// create dom element
var element = document.createElement('div');
// apply my custom view
$(element).append('<!--my HTML -->');
// apply knockout bindings
ko.applyBindings(myViewModel, element);
// show sharepoint modal dialog
var options = {
    allowMaximize: false,
    html: element,
    title: "My title",
    autoSize: true,
    showClose: true,
    dialogReturnValueCallback: myCallback
};

SP.UI.ModalDialog.showModalDialog(options);

所以在你的情况下：

var element = document.createElement('div');
$(element).append('<div id="d10" class="dialogHolder"><div id="kobasic"><h4>Editable data</h4><p><input type="text" data-bind="value: firstName" /></p><p><input type="text" data-bind="value: lastName" /></p><p>Full Name: <span data-bind="text: fullName"></span></p></div></div>');
ko.applyBindings(new ViewModel(), element);
var options = {
    allowMaximize: false,
    html: element,
    title: "My title",
    autoSize: true,
    showClose: true,
    dialogReturnValueCallback: myCallback
};

SP.UI.ModalDialog.showModalDialog(options);