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 模态（或其他任何地方）中都可以正常工作，但在 Popover 中不会更新变量/单选按钮。我认为这是因为 HTML 包含在 data-content="..." 属性中，因此不会被 web-ui 处理。

有没有其他方法可以让数据绑定在 Bootstrap 弹出窗口中工作？

谢谢

4

1 回答 1

0

data-html="true"在您的按钮中使用。

带有 HTML 的弹出框演示

于 2013-05-13T18:14:02.127 回答