在“选择”中加载视图并在文本框中查看所选值

时间:2018-02-13 10:09:40

标签: knockout.js

我正在尝试将“角色”加载到选择控件中。 使用以下选项正确填充选择:

 var user = new spatest.myrole(result.roleid, result.rolename);

但不是这个:

var user = new spatest.roleViewModel(result.roleid, result.rolename);

最终,我想在select控件中填充每个角色的值,然后在选择每个角色时,我希望rolename和roleid出现在文本框中:

<input id="idrolename" type="text" data-bind="value: rolename" />
<input id="idroleid" type="text" data-bind="value: roleid"  />

我是Knockout的初学者!

我的view.html:

<div class="dnnFormItem">
    <div><label for="itemUser">[Resx:{key:"lblAssignedUser"}]</label></div>
    <select id="rolesid" data-bind="options: roleList,
                                    optionsText: 'rolename',
                                    optionsValue: 'roleid',
                                    optionsCaption: 'Choose...'"></select>
</div>

我的JS档案:

var spatest = spatest || {};

spatest.roleListViewModel = function (moduleId, resx) {

    var service = {
        path: "spatest",
        framework: $.ServicesFramework(moduleId)
    }
    service.baseUrl = service.framework.getServiceRoot(service.path);

    var isLoading = ko.observable(false);
    var roleList = ko.observableArray([]);


    var init = function () {
        getRoleList();
    }

    var getRoleList = function () {
        isLoading(true);

        // need to calculate a different Url for User service
        var restUrl = service.framework.getServiceRoot(service.path) + "Myroles/Roles/";
        var jqXHR = $.ajax({
            url: restUrl,
            beforeSend: service.framework.setModuleHeaders,
            dataType: "json",
            async: false
        }).done(function (data) {            
            if (data) {
                load(data);
            }
            else {
                clear();
            }
        }).always(function (data) {
            isLoading(false);
        });
    };

    var load = function (data) {      
        roleList.removeAll();
        var underlyingArray = roleList();
        for (var i = 0; i < data.length; i++) {
            var result = data[i];
            var user = new spatest.roleViewModel(result.roleid, result.rolename);
           //  var user = new spatest.myrole(result.roleid, result.rolename);
           // var user = { roleid: result.roleid, rolename: result.rolename };
            underlyingArray.push(user);
        }
        roleList.valueHasMutated();
    };

    return {
        init: init,
        load: load,
        roleList: roleList,
        isLoading: isLoading
    }
};

spatest.roleViewModel = function () {

    var roleid = ko.observable('');
    var rolename = ko.observable('');

    var load = function (data) {
        roleid(data.roleid)
        rolename(data.rolename);
    };


    return {
        roleid: roleid,
        rolename: rolename,
        load: load
    }
}


spatest.myrole = function (roleid, rolename) {
    this.roleid = roleid;
    this.rolename = rolename;
}

spatest.roleChanged = function (obj, event) {

    if (event.originalEvent) { //user changed
        alert('1');
    } else { // program changed
        alert('2');
    }

}

1 个答案:

答案 0 :(得分:1)

您的roleViewModel设置了内部load功能,可以执行分配,因此

之后
var user = new spatest.roleViewModel(result.roleid, result.rolename);

你需要做

user.load(result);