Question

我正在使用Hot Towel SPA模板建立SPA 这是我的问题：
我有一个视图，我把与场地相关的信息（名称，描述，地址等）与场地相关联的房间有不同的房间（名称，描述，类型等）我有一个房间列表和一个按钮“添加新房间”。
当我按下按钮时，会弹出一个模态对话框，我填写表格中包含所需信息，然后保存。关闭对话框后，列表会更新。我可以从对话框中检索信息，但如果字段留空，我无法触发验证规则。
datacontext.HasChanges（）也始终返回true 。是否可以像任何其他视图一样使用模态对话框？这是我正在使用的代码的一部分：
来自 Model.cs ：

public class Venue
{
    [Key]
    public int VenueId { get; set; }
    [Required(ErrorMessage = "Venue Name is required.")]
    [Display(Name = "Venue Name")]
    public string Name { get; set; }
    public string Description { get; set; }

    public virtual ICollection<Room> Fields { get; set; }
    ...
}

public class Room
{
    [Key]
    public int RoomId { get; set; }
    [Required(ErrorMessage = "Name is required.")]
    [Display(Name = "Name")]
    public string Name { get; set; }
    public string Description { get; set; }
    public string Notes { get; set; }

    public int VenueId { get; set; }
    public virtual Venue Venue { get; set; }
    ...
}

来自 venuedetail.js ：

define(['services/datacontext',
    'services/model',
    'durandal/plugins/router',
    'durandal/system',
    'durandal/app',
    'services/logger',
    'viewmodels/roommodal'],
function (datacontext, model, router, system, app, logger, roommodal) {
    ...
    var addRoom = function () {
        var newRoom= datacontext.manager.createEntity("Room");
        roommodal.room = newRoom;
        app.showModal(roommodal).then(function (response) {
            if (response) {

            }
            return true;
        });
    };
    ...

来自roommodal.js：

define(['durandal/app', 'services/datacontext', 'durandal/system',     'durandal/plugins/router', 'services/logger'],
function (app, datacontext, system, router, logger) {
    var isSaving = ko.observable(false);
    var room= ko.observable();
    activate = function(routeData) {
        return true;
    };
hasChanges = ko.computed(function() {
    return datacontext.hasChanges(); // Always true ?
});
canSave = ko.computed(function() {
    return hasChanges() && !isSaving();
});

canDeactivate = function () {
    return true;
};

var save = function(dialogResult) {
    this.modal.close(dialogResult);
    };

    var cancel = function() {
        this.modal.close(false);
    };

var vm = {
    activate: activate,
    save: save,
    canSave: canSave,
    cancel: cancel,
    canDeactivate: canDeactivate,
    room: room,
    hasChanges: hasChanges,
    title: 'Add room'
};

return vm;

来自 roommodal.html ：



<div class="messageBox">
<div class="modal-header">
    <h3 data-bind="text: title"></h3>
    <i class="icon-asterisk" data-bind="visible: hasChanges"></i>
</div>
<div class="modal-body">
    <div data-bind="with: room">
        <label for="name">Name</label>
        <input id="name" data-bind="value: name, valueUpdate: 'afterkeydown'"
            placeholder="Enter name" />
        <div>
            <label>Description</label>
            <textarea data-bind="value: description"
                placeholder="Enter description"></textarea>
        </div>
        <div>
            <label>Notes</label>
            <textarea data-bind="value: notes"
                placeholder="Enter notes"></textarea>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-info"
        data-bind="click: cancel, enable: canSave">
        <i class="icon-undo"></i>Cancel</button>
    <button class="btn btn-info"
        data-bind="click: save, enable: canSave">
        <i class="icon-save"></i>Save</button>
</div>

<div class="messageBox"> <div class="modal-header"> <h3 data-bind="text: title"></h3> <i class="icon-asterisk" data-bind="visible: hasChanges"></i> </div> <div class="modal-body"> <div data-bind="with: room"> <label for="name">Name</label> <input id="name" data-bind="value: name, valueUpdate: 'afterkeydown'" placeholder="Enter name" /> <div> <label>Description</label> <textarea data-bind="value: description" placeholder="Enter description"></textarea> </div> <div> <label>Notes</label> <textarea data-bind="value: notes" placeholder="Enter notes"></textarea> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-info" data-bind="click: cancel, enable: canSave"> <i class="icon-undo"></i>Cancel</button> <button class="btn btn-info" data-bind="click: save, enable: canSave"> <i class="icon-save"></i>Save</button> </div> 任何帮助将不胜感激。提前谢谢。

Answer 1

当您尝试使用datacontext.saveChanges()进行保存时会触发验证，而您在这段代码中没有这样做，相反，您只是关闭了模态窗口。

查看保存是否成功的最简单方法是事后检查HasChanges - 如果一切顺利，它应该是假的，否则它将是真的。

当您进入模态窗口时，

datacontext.HasChanges()会返回true，因为您在打开模态窗口之前创建了一个实体并将其放在上下文中。在关闭模态窗口之前，您只能忽略HasChanges并静默CancelChanges。

Hot Towel SPA Modal Dialog敲除绑定和验证

1 个答案: