blocks|key|167398|text|据我所知，(可能)最好的方法是创建一个ko绑定处理程序，我称之为showModal|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|167399|ko.bindingHandlers.showModal+=+{
++++init:+function+(element,+valueAccessor)+{},
++++update:+function+(element,+valueAccessor)+{
++++++++var+value+=+valueAccessor();
++++++++if+(ko.utils.unwrapObservable(value))+{
++++++++++++$(element).modal('show');
++++++++++++//+this+is+to+focus+input+field+inside+dialog
++++++++++++$("input",+element).focus();
++++++++}
++++++++else+{
++++++++++++$(element).modal('hide');
++++++++}
++++}
};|code-block|syntax|javascript|167400|用法如下：|167401|<div+class="modal+hide+fade"+data-bind="showModal:selectedItem,+with:selectedItem">
++<div+class="modal-header">
++++<button+type="button"+class="close"+data-dismiss="modal"+aria-hidden="true">&times;</button>
++++<h3+data-bind="text:name"></h3>
++</div>
++<div+class="modal-body">
++++<form+data-bind="submit:deselectItem">
++++++++
++++</form>
++</div>
++<div+class="modal-footer">
++++<a+href="#"+class="btn"+data-bind="click:deselectItem">Close</a>
++</div>
</div>|167402|entityMap^0|W|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>As I figured out, the (probably) best way to do this is to create a ko binding handler, I called it <code>showModal</code>:</p>

<pre><code>ko.bindingHandlers.showModal = {
    init: function (element, valueAccessor) {},
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal('show');
            // this is to focus input field inside dialog
            $("input", element).focus();
        }
        else {
            $(element).modal('hide');
        }
    }
};
</code></pre>

<p>Usage is like this:</p>

<pre><code>&lt;div class="modal hide fade" data-bind="showModal:selectedItem, with:selectedItem"&gt;
  &lt;div class="modal-header"&gt;
    &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
    &lt;h3 data-bind="text:name"&gt;&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
    &lt;form data-bind="submit:deselectItem"&gt;
        &lt;!-- editor for item here --&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;a href="#" class="btn" data-bind="click:deselectItem"&gt;Close&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|167459|text|如果应用以下模式，它会变得容易得多：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|167460|<form+class="modal+hide+fade"+data-bind="visible:selectedItem,+with:selectedItem,+submit:deselectItem">
++++...
</form>|code-block|syntax|javascript|167461|这样，您就可以在提交处理程序中重新获得表单，并在那里正确地关闭它：|167462|deselectItem+=+function(form){
++...
++$(form).modal('hide');
}|167463|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>It gets a lot easier if you apply the following pattern:</p>

<pre><code>&lt;form class="modal hide fade" data-bind="visible:selectedItem, with:selectedItem, submit:deselectItem"&gt;
    ...
&lt;/form&gt;
</code></pre>

<p>That way, you get the form back in your submit handler and can properly close it there:</p>

<pre><code>deselectItem = function(form){
  ...
  $(form).modal('hide');
}
</code></pre>


blocks|key|167529|text|我已经为引导模式使用了这个自定义绑定处理程序。另外，在模式中，我添加了两个时刻日期选择器。但是当我使用这个绑定处理程序时，在click事件上模态是可见的，但是datepicker+div也是可见的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|167530|如果我不使用这个并使用|167531|$('.classname_of_bootstrap_modal').modal('show')|code-block|syntax|javascript|167532|该模式工作得非常好。|167533|所以，我猜在使用这个绑定处理程序时有一些问题，并且不能获得它。|167534|我对此进行了评论|167535|$("input",+element).focus();|167536|执行此操作时，datepicker+div不会自动显示。当我单击它们时，它们是可见的，但删除它的问题是，如果我单击其中一个datepicker，它将关闭引导模式。但它不应该关闭它。|offset|length|style|CODE|167537|entityMap^0|0|0|0|0|0|0|0|7|A|1P|A|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|15|8|@$S|16|T|17|U|V]|$S|18|T|19|U|V]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|X|$]]

<p>I have used this custom binding handler for bootstrap modals. Also in the modal i have added two moment datepicker. but when I use this binding handler the modal is visible on click event but datepicker div also visible</p>

<p>if I don't use this and use </p>

<pre><code>$('.classname_of_bootstrap_modal').modal('show')
</code></pre>

<p>The modal works perfectly fine. </p>

<p>So, i guess there is some issue in using this binding handler and not able to get it. </p>

<p>I commented this </p>

<pre><code>$("input", element).focus();
</code></pre>

<p>On doing that the <code>datepicker</code> div's are not displaying automatically. they are visible on when i click on them but issue on removing this is if i click one of the <code>datepicker</code>, it closes the bootstrap modal. but it shouldnt close it. </p>


<p>I need to show modal dialog for editing item in single page app when I select an item from list. </p>

<p>Problem: I used <code>visible</code> binding, but that turned out to be cumbersome, and it does not work properly, as it shows only dialog, without overlay, and fade (if any) does not work.</p>

<p>Html:</p>

<pre><code>&lt;div class="modal hide fade" data-bind="visible:selectedItem, with:selectedItem"&gt;
  &lt;div class="modal-header"&gt;
    &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
    &lt;h3 data-bind="text:name"&gt;&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
    &lt;form data-bind="submit:deselectItem"&gt;
        &lt;!-- editor for item here --&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;a href="#" class="btn" data-bind="click:deselectItem"&gt;Close&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Model for this is simple object with observableList, obervable selectedItem, and deselectItem function which sets selectedItem to null.</p>


Show twitter bootstrap modal dialog automatically with knockout

当我从列表中选择一个项目时，我需要在单页应用程序中显示编辑项目的模式对话框。问题:我使用了visible绑定，但后来发现它很麻烦，而且不能正常工作，因为它只显示对话框，没有覆盖，淡入淡出(如果有的话)不起作用。Html：<div class="modal hide fade" data-bind="visible:se...

问自动显示带有敲出功能的twitter引导模式对话框
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动显示带有敲出功能的twitter引导模式对话框EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动显示带有敲出功能的twitter引导模式对话框
EN