Knockout数组对象到模态对话框,通过提交

时间:2015-07-24 07:59:18

标签: knockout.js

我有一个用于填充表格的淘汰数组。单击一行时,将打开一个模式,其中显示所显示行的详细信息。

在提交模态时,我想将带有任何更新的数组对象的详细信息传递回服务器。

有没有办法在不将数组对象ID绑定到另一个knockout observable的情况下执行此操作?

这是我的数组:

ko.mapping.fromJS(type2A, {}, self.circuitsT2A);

这是我打开对话框(模态)的事件

self.OpenCctView = function (data) {


    console.log(data.PanCctID());
    self.selectbase('400');
    self.modalCctID(data.Assigned());
    self.showDialog(true);
};

console.log语句是一个int

可以看出,我用数据传递数组对象。对象ID是PanCctID。

当我提交表单时,我不知道如何在视图模式中调用特定的数组对象。

self.submit = function (data) {
    console.log(data);
    alert(self.selectbase() );
    self.showDialog(false);
}

console.log语句是:

basesize: observable()
circuits: observable()
circuitsT2A: observable()
circuitsT2B: observable()
close: ()
getID: (data)
kVA: observable()
modalCctID: observable()
selectbase: observable()
showDialog: observable()
submit: (data)

这是我的数组表绑定

        <table class="table table-hover">
            <thead>
                <tr><th>Name</th><th>Cct</th><th>Ph</th></tr>
            </thead>
            <tbody data-bind="foreach: circuitsT2A">
                <tr data-bind="click: $root.OpenCctView">

                    <td data-bind="text: Assigned"></td>
                    <td data-bind="text: cct"></td>
                    <td data-bind="text: Phase"></td>
                </tr>
            </tbody>
        </table>

模式代码

<div class="modal fade" tabindex="-1" role="dialog" data-bind="modal:showDialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Circuit Details</h4>

            </div>
            <div class="modal-body">
                <div class="form-group">
                    <select data-bind="options: basesize,value : selectbase" class="form-control"></select>
                </div

                <div class="form-group">
                    @*<label for="exampleInputEmail1">Email address</label>*@
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Assignment" data-bind="value: modalCctID">
                </div>

                <textarea class="form-control" rows="3" placeholder="Comments" data-bind="text: CctAssigned"></textarea>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bind="click : submit">Submit</button>
                <button type="button" class="btn btn-primary" data-bind="click : close">Close</button>
            </div>
        </div>
    </div>
</div>

视图模型

self.circuits = ko.observableArray([]);
self.circuitsT2A = ko.observableArray([]);
self.circuitsT2B = ko.observableArray([]);

//modal details

self.basesize = ko.observableArray(['250', '400', '630', '800']);
self.selectbase = ko.observable();

self.modalCctID = ko.observable();
self.CctAssigned = ko.observable();


//Open Circuit View

self.OpenCctView = function (data) {


    console.log(data.PanCctID());
    self.selectbase('400');
    self.modalCctID(data.Assigned());
    self.showDialog(true);
};


self.showDialog = ko.observable(false);

self.close = function () {

    self.showDialog(false);
}


self.submit = function (data) {
    console.log(data);
    alert(self.selectbase() );
    self.showDialog(false);
}

0 个答案:

没有答案