jquery - モーダルポップアップからリアルタイムで親ページを更新する方法

Question

私は問題があります。私は、いくつかの詳細を含む人物のリストを含むビューを持っています。そのリストをクリックすると、詳細が表示されたブートストラップ モーダルがポップアップ表示されます (モーダル以外の編集ページのように)。モーダルで変更できるようにしたいと同時に、入力した新しいデータで親ページを更新する必要があります。そのため、ユーザーがモーダルのボタンを押さなくても、親ページが更新されるはずです。これは、親ページの html です。

<section id="sessions-view" class="view">
    <header>

        <h3 class="page-title" data-bind="text: title"></h3>   
        <i class="icon-asterisk" data-bind="visible:hasChanges"></i>
        <div class="article-counter">
            <address data-bind="text: domainUser().length"></address>
            <address>found</address>
        </div>
    </header>
    <section class="view-list" data-bind="foreach: domainUser">
        <article class="article-left-content">
            <div class="domainUser-brief" title="Go to user domain details">

                <span data-bind="text: firstName"></span>
                <span data-bind="text: lastName"></span>
                <span data-bind="text: email"></span>
                <span data-bind="text: age"></span>
                <span data-bind="text:city"></span>

            </div>
        </article>
    </section>


</section>

親ページの js:

define(['services/datacontext', 'durandal/plugins/router', 'durandal/modalDialog', 'durandal/app'],
    function (datacontext, router, modalDialog, app) {
        var domainUser = ko.observableArray();

        var activate = function () {
            var result = datacontext.getDomainUsers(domainUser);
            return result;
        };
var hasChanges = ko.computed(function() {
            return datacontext.hasChanges();
        });
 var bindEventToList = function (rootSelector, selector, callback, eventName) {
            var eName = eventName || 'click';
            $(rootSelector).on(eName, selector, function () {
                var domainUserData = ko.dataFor(this);
                callback(domainUserData);
                return false;
            });
        };


        var vm = {
            activate: activate,
            refresh: refresh,
            domainUser: domainUser,
            hasChanges: hasChanges,
            viewAttached: viewAttached,
            title: 'Domain Users',
        };
        return vm;
    });

モーダルのhtml:

<div id="myModal" class="modal" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

    </div>
    <div class="modal-body">
        <section id="session-view" class="view">
           <h3 class="page-title" data-bind="text: title"></h3> <i class="icon-asterisk" data-bind="visible: hasChanges" ></i>

    <div data-bind="with: domainUser"> 
        <div class="details-left">
            <label for="title">First Name</label>
                <input id="title" data-bind="value: firstName" placeholder="First Name"/>
            <label for="title">Last Name</label>
                <input id="Text1" data-bind="value: lastName" placeholder="Last Name"/>
            <label for="title">Email</label>
                <input id="Text2" data-bind="value: email" placeholder="Email"/>
            <label for="title">Age</label>
                <input id="Text4" data-bind="value: age" placeholder="Age"/>
            <label for="title">City</label>
                <input id="Text3" data-bind="value: city" placeholder="City"/>

        </div>

    </div>
</section>
</div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true" data-bind="click: cancel">Close</button>
        <button class="btn btn-primary" data-bind=" click: save" aria-hidden="true">Save changes</button>

    </div>
</div>

そしてモーダルの.js

define(['services/datacontext',
        'durandal/plugins/router',
        'durandal/system',
        'durandal/app',
        'services/logger'],
    function (datacontext, router, system, app, logger) {
        var domainUser = ko.observable();
 var activate = function (activationData) {
            var id = parseInt(activationData.id);
            return datacontext.getDomainUserById(id, domainUser);
        };
 var hasChanges = ko.computed(function () {
            return datacontext.hasChanges();
        });
var cancel = function () {
            datacontext.cancelChanges();
            this.modal.close();
        };

        var canSave = ko.computed(function () {
            return hasChanges() && !isSaving();
        });

        var save = function() {
            isSaving(true),
            this.modal.close();

            return datacontext.saveChanges().fin(complete);};
 function complete() {
                isSaving(false);
            }
var vm = {
            activate: activate,
            cancel: cancel,
            canSave: canSave,
            hasChanges: hasChanges,
            save: save,
            domainUser: domainUser,
            title: 'Domain user details'
        };
        return vm;
});