将knockoutjs对象移动到弹出编辑表单中

Question

我有我的webservice使用knockoutjs将json渲染到一组嵌套标签中.(效果很好).

所以我现在要做的是有一个弹出编辑窗口(已经使用KendoUI\jquery设置)来更改值.

问题虽然我不知道我是否要去吃午餐,这甚至可能......你怎么会把一个绑定的对象传递给别的东西来处理编辑？

Answer 1

我在我的代码中做了类似的事情:

在我的viewModel中,我创建了一个登录函数的实例:

    this.loginDialog = ko.observable(new LoginDialog(this));

它的定义是这样的:

function LoginDialog(viewModel) {
    var self = this;
    this.viewModel = viewModel;

    this.userid = ko.observable();
    this.password = ko.observable();
    this.open = ko.observable(false);
    this.message = ko.observable();

    // more here
}

然后我有一个叫做的绑定dialog:

ko.bindingHandlers.dialog = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        setTimeout(function() { 
            $(element).dialog(options || {});
        }, 0);

        //handle disposal (not strictly necessary in this scenario)
         ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
             $(element).dialog("destroy");
         });   
    },
    update: function(element, valueAccessor, allBindingsAccessor) {
         var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().openWhen);
         var options = ko.utils.unwrapObservable(valueAccessor());
         var $elem = $(element);
         var dynamicOptions = ko.utils.unwrapObservable(allBindingsAccessor().dynamicOpts) || {};
         $elem
            .dialog(shouldBeOpen ? "open" : "close");
         if (dynamicOptions.title)
             $elem.dialog("option", "title", ko.utils.unwrapObservable(dynamicOptions.title));
    }
};

我称之为这样

<!--  ko with: loginDialog -->
<div id='logindlg' class="dialog"
    data-bind="dialog: {autoOpen: false, modal: true, closeOnEscape: false, title: 'Login', height: 300, width: 550, dialogClass: 'no-close', resizable: false}, openWhen: open">

 <!-- more stuff here -->
</div>
<!-- /ko -->