Question

嗨，这是这个问题的延续： integrating jquery ui dialog with knockoutjs

我已经为一个modal实现了Niemeyers解决方案来处理登录，但是也希望它能够处理一个创建用户页面。这是我第一次编写自定义处理程序，并且真的不知道如何从这里继续...

这可以在同一个处理程序中实现，还是需要为每个页面创建两个单独的处理程序？无论如何，有关于我如何尝试解决这个问题的一些评论，但可以帮助我们......

链接到小提琴：http://jsfiddle.net/king_s/9m3678m2/6/

HTML

<div id="dialog" data-bind="dialog: {autoOpen: false, title: 'Sign in' }, signIn_Visible: isOpen">
  <table>
    <tr>
      username
      <input />
    </tr>
    <tr>
      password
       <input />
    </tr>
    <tr>
      <a href=# data-bind="_page two"> sign up</a>
    </tr>
  </table>
  <button data-bind="click: close">Close</button>
</div>

<!--Mark up for dialog page 2
<div id="dialog_two" data-bind="dialog: {autoOpen: false, title: create user }", create_visible>
  MARK UP GOES HERE..
</div>
-->
<div>
  <button data-bind="click: open">Open</button>
  <button data-bind="click: close">Close</button>
</div>
<hr/>
<div data-bind="text: ko.toJSON($root)"></div>

JS

   ko.bindingHandlers.dialog = {
   init: function(element, valueAccessor, allBindingsAccessor) {
    var options = ko.utils.unwrapObservable(valueAccessor()) || {};
    //do in a setTimeout, so the applyBindings doesn't bind twice from element being copied and moved to bottom
    setTimeout(function() {
  options.close = function() {
    allBindingsAccessor().signIn_Visible(false);
  };

  $(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().signIn_Visible),
   $el = $(element),
   dialog = $el.data("uiDialog") || $el.data("dialog");

 // var openRegistration = ko.utils.unwrapObservable(allBindingsAccessor()
 // .create_visible),
 // $ele = $(element),
 // dialog_reg = $el.data("uiDialog") || $el.data("dialog");

//don't call open/close before initilization
if (dialog) {
  //open or close - functions on the jquery dialog object
  $el.dialog(shouldBeOpen ? "open" : "close");

  //Create conditional statement here to decide wheter to open/closes this page
  //or navigate to page 2??
}
  }
};

var viewModel = {
  label: ko.observable('dialog test'),
  isOpen: ko.observable(false),
  open: function() {
    this.isOpen(true);
 },
close: function() {
  this.isOpen(false);
 }
};
ko.applyBindings(viewModel);

将jquery ui对话与knockoutjs集成 - 续

0 个答案: