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

时间:2018-02-14 15:33:23

标签: sharepoint knockout.js modal-dialog observable two-way-binding

我尝试使用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)但是我无法想出替代解决方案

1 个答案:

答案 0 :(得分: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);