Question

我正在尝试编辑用户数据，但是当我点击用户ID时，单选按钮没有被选中。

result.IsActive返回true或false。我也尝试在ajax响应中默认设置result.IsActive（true），但它确实无效。我哪里错了？在此先感谢

＆＃13;

var self = this;
        self.DealerId = ko.observable();
        self.DealerName = ko.observable();
        self.Gender = ko.observable();
        self.Dealers = ko.observableArray(vm.Dealers());

          $.ajax({
                url: '@Url.Action("EditDealer", "Dealer")',
                cache: false,
                type: 'GET',
                contentType: 'application/json',
                data: { 'id': id },
                success: function (result) {
                    self.DealerId(result.DealerId);
                    self.DealerName(result.DealerName);
                    self.IsActive = ko.observable(result.IsActive);
                    $('#basic').modal('show');
                }
            });

＆＃13;

<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header" style="background-color:#4d90fe;padding-top:10px;padding-bottom:10px">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
				<h4 class="modal-title" style="color:white">Update Dealer Information</h4>
			</div>
			<div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label col-md-3">Dealer Name</label>
                            <div class="col-md-9">
                                <input class="form-control" data-bind="value:DealerName" required="required" 
                                    data-parsley-required-message="Dealer name is required"></input>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top:10px">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label col-md-3">Dealer Status</label>
                            <div class="col-md-9">
                                <label style="padding-left:0"><input type="radio" name="status" value="true" data-bind="checked: IsActive">Active</label>
                                <label ><input type="radio" name="status" value="false" data-bind="checked: IsActive">Inactive</label>
                            </div>                            
                        </div>
                    </div>
                </div>
			</div>
			<div class="modal-footer" style="margin-top:0;padding-top:10px;padding-bottom:10px">
				<button type="button" id="cancelSave" class="btn default" data-dismiss="modal" >Cancel</button>
				<button type="button" id="save" class="btn blue">Save</button>
			</div>
		</div>
	</div>
</div>

＆＃13;

Answer 1

看来，就像你在ajax-success回调中初始化你的ko-viewmodel属性self.IsActive一样。这意味着，只有在ajax完成时才会创建可观察的IsActive属性。但是ajax调用是异步的。因此，如果您在没有实例化的self.IsActive属性的情况下绑定viewmodel，则会从ko获得错误。（查看浏览器控制台）。它不是在viewmodel构造函数中进行ajax调用的好方法。

尝试在ajax之前声明属性，如下所示：

var self = this;
    self.DealerId = ko.observable();
    self.DealerName = ko.observable();
    self.Gender = ko.observable();
    self.Dealers = ko.observableArray(vm.Dealers());
    self.IsActive = ko.observable(false);

      $.ajax({
            url: '@Url.Action("EditDealer", "Dealer")',
            cache: false,
            type: 'GET',
            contentType: 'application/json',
            data: { 'id': id },
            success: function (result) {
                self.DealerId(result.DealerId);
                self.DealerName(result.DealerName);
                self.IsActive(result.IsActive);
                $('#basic').modal('show');
            }
        });

在这种情况下，您的收音机将具有默认的选中值（无效），直到ajax完成。在ajax完成后，它将成为正确的值。避免这种暂时数据不一致的最好方法是在创建viewmodel之前加载之前的所有数据，并将所有ajax-data作为构造函数参数传递。这种方法授予ko-viewmodel在绑定时将具有实际数据。（像这样：

$.ajax({ url: '@Url.Action("EditDealer", "Dealer")', cache: false, type: 'GET', contentType: 'application/json', data: { 'id': id }, success: function (result) { //create your viewmodel inside the ajax-succcess and //populate it with data var myViewModel = new MyViewModel(result); //and apply ko-binding here, after creating the viemodel $('#basic').modal('show'); } }); function MyViewModel(ajaxData){ var self = this; self.DealerId = ko.observable(ajaxData.DealerId); self.DealerName = ko.observable(ajaxData.DealerId); self.Gender = ko.observable(ajaxData.DealerName); self.IsActive = ko.observable(ajaxData.IsActive); self.Dealers = ko.observableArray(vm.Dealers()); }

Answer 2

您需要为name分配相同的<input type="radio">，让浏览器了解它们是否相关。

ajax调用后单选按钮不会改变（knockout js）

2 个答案: