1

Bootstrap Popover 内の Dart 変数に双方向のデータ バインディングを使用しようとしていますが、成功しません。私のコードは次のようになります。

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test Popup</title>        

    <!-- Bootstrap -->
    <link href="resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="resources/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">

  </head>
  <body>
      <button type="button" id="constcon-options-button" class="btn" title="Options" rel="popover" data-html="true" data-content="
        <div id='constcon-options-form' class='form-horizontal'>
           <input type='radio' name='veggies' value='kale' bind-value='veg'>
             Kale<br>
           <input type='radio' name='veggies' value='spinach' bind-value='veg'>
             Spinach<br>
           <input type='radio' name='veggies' value='carrots' bind-value='veg'>
             Carrots
        </div>">Options
      </button>

      <p>veg = {{veg}}</p>

      <script type='application/dart'>

        import 'package:web_ui/web_ui.dart';
        import 'package:js/js.dart' as js;

        @observable
        String veg = 'spinach'; // Sets an initial value. Button with 
                                // value == 'spinach' is auto-selected.
        void main() {
          js.scoped(() 
          { 
            js.context.jQuery("#constcon-options-button").popover();                      
          });
        }

      </script>    

    <!-- jQuery -->
    <script src="resources/jquery/jquery.min.js"></script>       

    <!-- Bootstrap -->
    <script src="resources/bootstrap/js/bootstrap.min.js"></script>

  </body>
</html>

これはすべて Bootstrap Modal (またはそれ以外の場所) では正常に機能しますが、Popover では変数/ラジオ ボタンを更新しません。これは、HTML が data-content="..." 属性に含まれているため、web-ui によって処理されないためだと思います。

Bootstrap ポップオーバーでデータバインディングを機能させる方法は他にありますか?

ありがとう

4

1 に答える 1

0

data-html="true"ボタンで使用します。

HTML を使用したポップオーバー デモ

于 2013-05-13T18:14:02.127 に答える