0

我有个问题。我有一个包含一些详细信息的人员列表的视图。当我单击该列表时，会弹出一个带有详细信息的引导模式（就像一个编辑页面，除了它是一个模式）。我希望能够在模式中进行更改，同时父页面应该使用我输入的新数据进行更新。所以父页面应该在没有用户按下模式中的按钮的情况下更新。这是父页面的 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;
});
4

1 回答 1

0

由于domainUser父视图中的变量ko.observableArray包含所有用户，因此您只需将ko.observable要编辑的用户传递activate()给弹出对话框视图的方法即可。然后，您不必在模态视图中进行 ajax 调用来获取用户；因此，为您节省了往返服务器的时间。您几乎对 有正确的想法ko.dataFor()，除了该函数返回原始数据，而不是与您的数组关联的可观察数据。

您已经在父节点上加载了所有数据，因此请利用这一优势。:)

于 2013-08-21T21:52:51.970 回答