knockout.js - 将 knockoutjs 对象移动到弹出编辑表单中

Question

我的网络服务使用 knockoutjs 将 json 呈现到一组嵌套标签中。 (效果很好)。

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

但问题是我不知道我是否出去吃午饭，这甚至是可能的...您如何将绑定(bind)对象传递给其他对象来处理编辑？

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 的绑定(bind):

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