Data-binding via Dart web-ui in a Bootstrap Popover -
i'm trying use two-way data-binding dart variable inside bootstrap popover no success. code looks like:
<!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' js; @observable string veg = 'spinach'; // sets initial value. button // value == 'spinach' 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>
this works ok in bootstrap modal (or anywhere else matter) doesn't update variable/radio buttons when in popover. assume because html contained within data-content="..." attribute , doesn't processed web-ui.
is there other way can data-binding working in bootstrap popover?
thanks
use data-html="true"
in button.
Comments
Post a Comment