2

Knockout ビューモデルからデータを渡したい jQuery モーダル ダイアログがあります。ダイアログはそのままで問題なく動作しますが、以下のコードは壊れています。

理想的には、モーダル ダイアログをトリガーする URI をクリックして、ダイアログが Knockout ビューモデルからデータをロードできるようにしたいと考えています。どんな助けでも大歓迎です。

マークアップ: 

<a href="#" id="listNames">List Names</a>

<div  id="listNames"  data-bind="dataModel: { autoOpen: false, modal: true }">
<div> 
    <form action=''>
        <p>You have added <span data-bind='text: name().length'>&nbsp;</span> 
            person(s)</p>
        <table data-bind='visible: name().length > 0'>
            <thead>
                <tr><th>Select</th>
                    <th>Name</th>
                    <th>Age</th>
                    <th />
                </tr>
            </thead>
            <tbody data-bind='foreach: metrics'>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td><span data-bind='text: name' >&nbsp;</span></td>
                    <td><span  data-bind='text: age'>&nbsp;</span></td> 
                </tr>
            </tbody>
        </table>
    </form>
  </div>
</div>

ビューモデル:

var dataModel = function (edata) {
    var self = this;
    self.edata = ko.observableArray(edata);

    self.addname = function () {
        self.edata.push({
            name: "",
            age: ""
        });
    };

    self.removename = function (name) {
        self.edata.remove(name);
    };

    self.save = function (form) {
        alert("Could now transmit to server: " 
              + ko.utils.stringifyJson(self.edata));
        // To actually transmit to server as a regular form post, write this: 
        // ko.utils.postJson($("form")[0], self.edata);
    };
};

var viewModel = new dataModel([
    { name: "Jack", age: "41" },
    { name: "Jill", age: "33" }
]);
ko.applyBindings(new viewModel);

jQuery ダイアログ:

$("#listNames, ").dialog({
    autoOpen: false,
    width: 300,
    modal: true,
    buttons: {
        "OK": function () {
            $(this).dialog("destroy");
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});

$("#openList")
    .click(function () {
        $("#listNames").dialog("open");
    });
4

1 に答える 1

2

あなたが投稿したコードにはいくつかのエラーがあります。ここに作業バージョンがあります: http://jsfiddle.net/uFgz8/1/

HTML は次のとおりです。

        <a href="#" data-bind="click: $root.openDialog"> Open dialog </a> //you had 2 elements with the same ID, I removed the ID on the link and bound it to a method in the view model

    <div id="listNames">   <div>
            <form action=''>
                <p>You have added <span data-bind='text: name.length'>&nbsp;</span> person(s)</p> // name item is not observable, so you cannot use name().length
                <table data-bind='visible: name.length > 0'> // same remark for name
                    <thead>
                        <tr>
                            <th>Select</th>
                            <th>Name</th>
                            <th>Age</th>
                            <th />
                        </tr>
                    </thead>
                    <tbody data-bind='foreach: edata'>
                        <tr>
                            <td>
                                <input type="checkbox" />
                            </td>
                            <td><span data-bind='text: name'>&nbsp;</span>

                            </td>
                            <td><span data-bind='text: age'>&nbsp;</span>

                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </div>

JS:

$("#listNames").dialog({
    autoOpen: false,
    width: 300,
    modal: true,
    buttons: {
        "OK": function () {
            // do something
            $(this).dialog("close"); // I replaced destroy by close, so it can be opened after ok has been clicked
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});

var dataModel = function (edata) {
    var self = this;
    self.edata = ko.observableArray(edata);

    self.addname = function () {
        self.edata.push({
            name: "",
            age: ""
        });
    };

    self.openDialog = function () {
        $("#listNames").dialog("open");
    };

    self.removename = function (name) {
        self.edata.remove(name);
    };

    self.save = function (form) {
        alert("Could now transmit to server: " + ko.utils.stringifyJson(self.edata));
        // To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.edata);
    };
};

var viewModel = new dataModel([{
    name: "Jack",
    age: "41"
}, {
    name: "Jill",
    age: "33"
}]);

ko.applyBindings(viewModel); // you have created a variable viewModel with data, but you bound ko with a new object of type viewModel, you must either call ko with viewModel you created, or inline the creation of a new "dataModel"

編集：変更にいくつかのコメントを追加しました

編集2：正しいバージョンに到達するためにjsfiddleへのリンクを更新しました;）

于 2013-07-11T18:30:27.367 に答える