Question

我尝试使用sharepoint模式对话框进行双向绑定（knockout 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（）不起作用（当我输入时）在姓氏文本框中的内容，它不会更新fullname）

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

Knockout双向绑定无法使用Sharepoint模式对话框

1 个答案: