品名 | 金額 | 味 | ボタン |
---|---|---|---|
|
できれば…確定ボタンを押さずに即反映ってしたい。他のライブラリをひっぱってくればできそうだけど面倒そうなので挫折。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>knockout.jsで親ウィンドウに値を渡す:子ウィンドウ</title> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="knockout-2.1.0beta.js"></script> <script type="text/javascript"> $(document).ready(function () { ko.applyBindings(new ViewModelChild()); }); function ViewModelChild() { var self = this; self.tasteAry = ko.observableArray([ {tasteData: 'たれ'}, {tasteData: '塩'}, {tasteData: '味噌'}, {tasteData: '芥子'}, ]); // 表示 self.addTaste = function(data) { source = ""; source += '<div style="font-weight:bold;padding:3px; border:1px dotted #ccc;background:#f6f6f6;">'; source += data.tasteData; source += '</div>'; window.opener.$(".checkDiv").css("display", "block"); window.opener.$(".checkDiv").html(source); }; } </script> </head> <body> <h1>「knockout.jsで親ウィンドウに値を渡す」の子ウィンドウ側</h1> <div> <table data-bind="visible: tasteAry"> <thead><tr><th>味</th><th>追加</th></thead> <tbody data-bind="foreach: tasteAry"> <tr> <td data-bind="text: tasteData"></td> <td><button data-bind="click: $root.addTaste">追加A</buuton></td> </tr> </tbody> </table> </div> </body> </html>