javascript - ajax调用后单选按钮不改变(knockout js)

Question

我正在尝试编辑用户数据，但是当我单击用户 ID 时，单选按钮未根据其值被选中。

result.IsActive 返回 true 或 false。 我还尝试在 ajax 响应中默认设置 result.IsActive(true) 但它不起作用。 我哪里错了？ 提前致谢

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');
                }
            });

<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>

Answer 1

看起来，就像您正在 ajax-success 回调中初始化 ko-viewmodel 的属性 self.IsActive 一样。这意味着，仅当 ajax 完成时才会创建可观察的 IsActive 属性。但ajax调用是异步的。因此，如果您在没有实例化 self.IsActive 属性的情况下绑定(bind) View 模型，您将收到 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');
            }
        });

在这种情况下，您的 radio 将具有默认的选中值(处于非事件状态)，直到 ajax 完成。 ajax完成后它将立即变成正确的值。避免这种暂时数据不一致的最佳方法是在创建 View 模型之前加载所有数据，并将所有 ajax 数据作为构造函数参数传递。这种方法允许 ko-viewmodel 在绑定(bind)时拥有实际数据。 (类似这样的:

$.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());
}