Question

我有一个更新页面表单，我在页面加载时尝试加载现有用户数据。然后，用户可以修改值并点击提交，这将导致数据被保存。我无法使用Knockout正确绑定数据。 $.getJSON调用工作并返回JSON字符串，但无论出于何种原因，UI都不会更新。这是我的代码：

    //View
       function companyViewModel() {
    var self = this;
    self.CompanyName = ko.observable();
    self.TenantID = ko.observable();
    self.Name = ko.observable();
    self.Host = ko.observable();
    self.Status = ko.observable();
    self.Title = ko.observable();
    self.Theme = ko.observable();
    self.Logo = ko.observable();
    self.ProfileID = ko.observable();
    self.AdminEmail = ko.observable();
    self.Address1 = ko.observable();
    self.Address2 = ko.observable();
    self.City = ko.observable();
    self.State = ko.observable();
    self.Zip = ko.observable();
    self.Country = ko.observable();
    self.Phone = ko.observable();
}    

var vm = new companyViewModel();

$.getJSON('http://localhost:8644/api/TenantAPI/5',
            function (tempData)
            {
                alert(JSON.stringify(tempData));
                ko.mapping.fromJSON(tempData, {}, vm);
            })
    .fail(handleModelFailed)
    .error(handleModelFailed);

ko.applyBindings(vm);


function handleModelFailed(jqXHR, txtStatus, error) {
    alert(txtStatus);
}

function populateModel(data) {
    myJSON = data;
    alert(JSON.stringify(myJSON));
}

以下是浏览器收到的JSON：

{"$id":"1","ChangeSets":[],"Departments":[],"Escalations":[],"SLAs":[],"TenantID":1,"Name":"iGoGreen","Host":"iGoGreen.solver.com","Status":"Active","Title":"iGoGreen","Theme":null,"Logo":null,"ProfileID":null}

API控制器：

 // GET api/tenant/5
    public HttpResponseMessage Get(int id)
    {
        //TODO:Remove hard-coded value
        var tenant = _tenantDataService.GetTenant("iGoGreen.solver.com");
        var response = Request.CreateResponse<Tenant>(HttpStatusCode.OK, tenant);
        response.Headers.Add("Access-Control-Allow-Origin", "*");
        return response;
    }

最后是HTML代码段：

    <section id="basicInfoSection" class="container data-group col-md-offset-1 col-md-10" style="border: 1px solid silver;">
    <h3>Company info:</h3><hr />
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">Company Name:</label>
        <div class="col-md-8">
            <input type="text" placeholder="Company Name" data-bind="text: CompanyName" class="form-control textbox-with-icon company removeWidthDefault">
        </div>
        <div class="col-sm-1">
            <span class="badge" data-placement="right" title="Enter the name of your company">?</span>
        </div>
    </div>
    <hr />
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">Web address:</label>
        <div class="col-md-8">
            <span class="form-control-static">
                <b class="text-highlighted example-url-lg">
                    http:// <input type="text" data-bind="value: Host" class="inline form-control  " style="width: 150px;">
                    .localhost.net
                </b>
            </span>
        </div>
        <div class="col-sm-1">
            <span class="badge" data-placement="right" title="Enter the URL you want to use to access your company's localhost.net portal">?</span>
        </div>
    </div>
    <hr />
</section>

另外，我尝试了几种方法，比如使用ko.mapping.fromJSON等无济于事。我确信这是我缺少的基本/小的东西......任何帮助都会受到赞赏!!

Answer 1

UI未更新，因为您的视图模型永远不会被提取的JSON填充。在您对服务器的$.getJSON调用中，您传入了viewmodel（self）而不是函数（请参阅jQuery docs）来填充视图模型。试试这个（使用映射插件）：

   function companyViewModel() {
       var self = this;
       self.CompanyName = ko.observable();
       ... the rest of your observables
   }

   var vm = new companyViewModel();
   $.getJSON('http://localhost:8644/api/TenantAPI/5', function (data) {
       ko.mapping.fromJS(data, {}, vm);
   });

   ko.applyBindings(vm);

Knockout绑定不起作用 - ASP.NET

1 个答案: