Question

我正在尝试使用双向数据绑定到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 popover中使用数据绑定工作？

由于

Answer 1

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

在Bootstrap Popover中通过Dart web-ui进行数据绑定

1 个答案:

Popover demo with HTML