0

有人可以帮我吗?

基本上我有一个带有子项目的项目列表。选中项目(复选框)时,我将有一个绑定者,可以自动检查匹配的项目并勾选复选框。

这适用于 Chrome、FF 和 IE > 9,但不适用于 IE 7 或 8。选中复选框时,它保持未选中状态,且绑定处理程序自动选中的复选框无法取消选中。

我的第二个问题是如何将 isDirty 标志设置为子项,因为子项(例如:我的数据示例中的)项映射到表单。这可能吗?

抱歉,想在 jsfiddle.net 中发布代码但无法正常工作:(

另外,有没有更好的方法来做我想要实现的目标?

提前谢谢了。

更新

我已经设法将代码放在 jsfiddle http://jsfiddle.net/huzzi786/ugcJU/

我要做的就是在选中复选框时(仅选中)根据某些条件查找匹配的项目并将它们标记为选中,然后在与 IE 7 一起使用的表单上显示子项目。获得 isDirty 将是额外的奖励在子项目上工作的标志。

HTML

<table>
    <tr>
        <td valign="top">
            <table>
                <thead>
                    <tr>
                        <td></td>
                        <td>Id</td>
                        <td>Name</td>
                    </tr>
                </thead>
                <tbody data-bind="foreach: users">
                    <tr data-bind="attr: { id: ('user-' + id()) }">
                        <td>
                            <input type="checkbox" data-bind="attr: { value: id(), id: id() }, checked: isSelected, SelectRelatedUsers: Name, event:{'change' : $parent.selectUser }" /></td>
                        <td class="quiet"><span data-bind="text: id"></span></td>
                        <td class="quiet">
                            <a href="#" class="tag-ts" data-bind="text: Name, click: $parent.selectUser"></a>
                        </td>

                    </tr>
                </tbody>
            </table>
        </td>
        <td valign="top">


            <table data-bind="with: selectedUser, visible: selectedUser() !=null" style="border: 1px solid #ccc">

                <thead>
                    <th>Day</th>
                    <th>isDirty</th>

                </thead>

                <tbody data-bind="foreach: Lines">

                    <tr>
                        <td>Mon</td>
                        <td>
                            <input class="input-small" type="text" data-bind="value: Mon" />
                        </td>
                  <!--       <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> -->
                    </tr>
                    <tr>
                        <td>Tue</td>
                        <td>
                            <input class="input-small" type="text" data-bind="value: Tue" />
                        </td>
                         <!--  <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> -->
                        <tr>
                            <td>Wed</td>
                            <td>
                                <input class="input-small" type="text" data-bind="value: Wed" />
                            </td>
                             <!--  <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> -->
                            <tr>
                                <td>Thu</td>
                                <td>
                                    <input class="input-small" type="text" data-bind="value: Thu" />
                                </td>
                           <!--     <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> -->
                                <tr>
                                    <td>Fri</td>
                                    <td>
                                        <input class="input-small" type="text" data-bind="value: Fri" />
                                    </td>
                                  <!--    <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> -->
                                </tr>
                    <tr>
                        <td colspan="3">
                            <button type="button" data-bind="click: saveData">
                                Save
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>

</table>

淘汰赛JS

 ko.dirtyFlag = function (root, isInitiallyDirty) {
        var result = function () { }
        var _initialState = ko.observable(ko.toJSON(root));
        var _isInitiallyDirty = ko.observable(isInitiallyDirty);

        result.isDirty = ko.dependentObservable(function () {
            return _isInitiallyDirty() || _initialState() !== ko.toJSON(root);
        });

        result.reset = function () {
            _initialState(ko.toJSON(root));
            _isInitiallyDirty(false);
        };

        return result;
    };

    var userMapping = {
        users: {
            key: function (item) {
                return ko.utils.unwrapObservable(item.Id);
            },
            create: function (options) {
                return createUser(options.data);
            }
        }
    };

    var createUser = function (user) {
        var result = ko.mapping.fromJS(user);
        result.dirtyFlag = ko.dirtyFlag(result);
        return result;
    };



        ViewModel = function (serverData) {
            users = ko.observableArray();
            selectedUser = ko.observable();
            selectedLines = ko.observable();
            users(serverData.users());

            ko.bindingHandlers.SelectRelatedUsers = {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                },
                update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

                    var u = (bindingContext.$parent.users);
                    // console.log(u.length)
                    if ($(element).is(':checked')) {
                        for (var i = 0; i < u().length; i++) {
                            if ((viewModel.group() == u()[i].group()) && (viewModel.status() == u()[i].status()) && (viewModel.accesslevel() == u()[i].accesslevel())) {
                                u()[i].isSelected(true);

                            } else {
                                u()[i].isSelected(false);

                            }
                        };
                    }
                }
            };

            selectUser = function () {
                selectedUser(this);
                selectedLines(this.Lines);
                console.log(selectedLines)
            };


            saveData = function () {
                alert('Saving data...')
                $.ajax({
                    type: "POST",
                    url: "/server/save",
                    data: ko.toJSON(selectedLines()),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        $('div-result').show();
                    }
                });

            };

            return {
                users: users,
                saveData: saveData,
                selectUser: selectUser

            }

        };

        var getdata = ko.mapping.fromJSON('{"users":[{"id":1,"Name":"Ali","group":2,"status":false,"accesslevel":1,"isSelected":false,"Lines":[{"lineid":3,"Mon":1,"Tue":8,"Wed":3,"Thu":4,"Fri":5}]},{"id":2,"Name":"Patel","group":2,"status":false,"accesslevel":1,"isSelected":false,"Lines":[{"lineid":2,"Mon":4,"Tue":2,"Wed":4,"Thu":4,"Fri":5}]},{"id":3,"Name":"Peter","group":2,"status":false,"accesslevel":2,"isSelected":false,"Lines":[{"lineid":3,"Mon":1,"Tue":11,"Wed":3,"Thu":1,"Fri":5}]},{"id":4,"Name":"Martin","group":2,"status":false,"accesslevel":2,"isSelected":false,"Lines":[{"lineid":4,"Mon":11,"Tue":2,"Wed":13,"Thu":4,"Fri":5}]},{"id":5,"Name":"Terry","group":2,"status":false,"accesslevel":2,"isSelected":false,"Lines":[{"lineid":5,"Mon":1,"Tue":2,"Wed":3,"Thu":4,"Fri":5}]}]}', userMapping, {});

        ko.applyBindings(ViewModel(getdata));
4

1 回答 1

1

看起来它在某种程度上与在 IE 中触发事件的顺序有关。

您可以通过从您的函数返回 true 来克服这个问题selectUser,这允许执行默认操作。

因此,您可能希望将其更改为:

        selectUser = function () {
            selectedUser(this);
            selectedLines(this.Lines);
            return true;
        };
于 2013-01-20T03:59:06.233 回答