javascript - 如果字段状态发生更改，则动态添加值

Question

我想知道这是否可能。当用户点击“保存”按钮时，我希望 knockout 检查标记为“状态”的字段是否已更改为“已完成”-然后我希望它将当前日期输入到完成日期字段。

这是我的字段 -

<ul class="button-group">
    <li><button data-bind="click: save" class="success">Save</button></li>
    <li><button data-bind="click: saveAndClose" class="success">Save and close</button></li>
    <li><button data-bind="click: cancel" class="alert">Cancel</button></li>
</ul>



<div data-bind="with: item">
        <label for="Type">Type</label>
        <input id="Type" data-bind="value: Type" disabled="disabled" type="text" />

        <label for="Status">Status</label>
        <select id ="Status" data-bind="value: Status">
            <option value="Not Started">Not Started</option>
            <option value="In Progress">In Progress</option>
            <option value="Completed">Completed</option>
        </select>

        <label for="Subject">Subject</label>
        <input id="Subject" data-bind="value: Subject" type="text"/>

        <label for="Content">Content</label>
        <textarea id="Content" data-bind="value: Content" type="text"></textarea>

        label for="DateCreated">Date Created (DD/MM/YYYY)</label>
        <input id="DateCreated" disabled data-bind="valueFormat: DateCreated, type: 'datetime', format: 'DD/MM/YYYY'" type="text" placeholder="Enter date in format DD/MM/YYYY" />

        <label for="DateLastModified">Date Last Modified (DD/MM/YYYY)</label>
        <input id="DateLastModified" data-bind="valueFormat: DateLastModified, type: 'datetime', format: 'DD/MM/YYYY'" type="text" placeholder="Enter date in format DD/MM/YYYY" />

        <label for="DateCompleted">Date Completed (DD/MM/YYYY)</label>
        <input id="DateCompleted" data-bind="valueFormat: DateCompleted, type: 'datetime', format: 'DD/MM/YYYY'" type="text" placeholder="Enter date in format DD/MM/YYYY" />
</div>

这是我的 js 文件到目前为止的组成

var Module = function(){
        var self = this;

        var updateItem = function(item) {
            if (item) {
                self.setupEntityValidation(item, self);
                self.item(item);
            }
        };

        self.title =  ko.observable();
        self.item = ko.observable();
        self.isLoadingData = ko.observable(true);
        self.entityName = 'Task';
        self.entityId = null;
        self.activate = function(cid, idOrNew, newType) {
            var loadedItem,
                types = {
                    task: {
                        type: 'Task',
                        newStatus: 'Not Started'
                    },
                    phone: {
                        type: 'Phone',
                        newStatus: 'Completed'
                    },
                    email: {
                        type: 'Email',
                        newStatus: 'Completed'
                    },
                    note: {
                        type: 'Note',
                        newStatus: 'Completed'
                    }
                },
                now = null,
                mode = 'new' === idOrNew ? 'Create new' : 'Edit';

            // Page title
            self.entityId = 'new' === idOrNew ? 0 : parseInt(idOrNew);
            self.title(mode + ' task');

            if ('new' !== idOrNew) {
                // Load the item
                self.isLoadingData = ko.observable(true);
                ds.getEntityWithKey('Task', self.entityId)
                    .then(function(data) {
                        if (data && data.entity) {
                            // Load item
                            updateItem(data.entity);
                        } else {
                            log.error('@todo get by id failed with result', data);
                        }
                    })
                    .fail(function(err) {
                        log.error('@todo get by id failed completely', err.stack);

                    })
                    .finally(function() {
                        self.isLoadingData(false);
                    });
            } else {
                // No id, create new. Check newType is valid
                if (types.hasOwnProperty(newType)) {
                    // Create new task
                    now = new Date();
                    loadedItem = ds.createEntity('Task', {
                        CentreID: parseInt(cid),
                        Type: types[newType].type,
                        Status: types[newType].newStatus,
                        DateCreated: now.toISOString()
                    });
                    if (loadedItem) {
                        updateItem(loadedItem);
                    } else {
                        log.error('Could not create new task item');
                    }
                } else {
                    log.error('Cannot create new task, illegal type:' + newType);
                }
                self.isLoadingData(false);
            }
        };
    };

    var moduleInstance = new Module();
    modex.addComponent('EntitySaveCancel', moduleInstance);
    modex.addComponent('EntityValidation', moduleInstance);

    return moduleInstance;
});

Answer 1

如果您想在字段更改为“已完成”时立即应用更改，您可以添加一个 subscribe 函数来监视可观察的“Status”是否有任何更改:

self.Status.subscribe(function (value) {

    if (value === "Completed") {
        //Change date here.
    }        

});

如果您想在单击“保存”后更改它，您可以在那里检查“状态”可观察值并相应地设置日期。

请告诉我们这是否适合您。