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;
});

Answer 1

由于父视图中的domainUser变量是包含所有用户的ko.observableArray，因此您只需将要编辑的用户的ko.observable传递给{弹出对话框视图的{1}}方法。然后你不必在你的模态视图中做一个ajax调用来获取用户;因此，节省您到服务器的往返。你几乎对activate()有正确的想法，除了该函数返回原始数据，而不是它在数组中与之关联的observable。

您已经在父级上加载了所有数据，因此可以利用这一优势。：）

如何实时更新模态弹出窗口中的父页面

1 个答案: