Question

我正在尝试加载一个包含两个模型的简单视图模型，Profile是ko.observable（）和requests，它是一个ko.observableArray（）。

当我应用绑定然后尝试绑定到ether profile.field或foreach：requests时，我没有输出，没有javascript或绑定错误。但是当我转出ko.toJSON（self.profile）或ko.toJSON（self.requests）时，我实际上得到了数据，它只是没有约束力，我不知道为什么，任何想法我正在做什么错。

以下是我的模特

var Profile = function(profile) {   
    var self = this;

    self.id                  = ko.observable(profile.id);
    self.user_id             = ko.observable(profile.user_id);
    self.first_name          = ko.observable(profile.first_name);
    self.last_name           = ko.observable(profile.last_name);
    self.age                 = ko.observable(profile.age);
    self.email               = ko.observable(profile.email);
    self.area                = ko.observable(profile.area);
    self.favorite_restaurant = ko.observable(profile.favorite_restaurant);
    self.avatar              = ko.observable(profile.avatar);
    self.on_mailing_list     = ko.observable(profile.on_mailing_list);
}
var Request = function(request) {
    var self = this;

    self.id           = ko.observable(request.id);
    self.user_id      = ko.observable(request.user_id);
    self.title        = ko.observable(request.title);
    self.participants = ko.observable(request.participants);
    self.food_type    = ko.observable(request.food_type);
    self.event_date   = ko.observable(request.event_date);
    self.time_of_day  = ko.observable(request.time_of_day);
    self.area         = ko.observable(request.area);
    self.description  = ko.observable(request.description);
    self.status       = ko.observable(request.status);
}

这是我的ViewModel

var MasterViewModel = function() {
    var self = this;

    self.profile       = ko.observable();
    self.requests      = ko.observableArray();
    self.notifications = ko.observableArray();

    // load the users profile 
    $.getJSON('/profiles/load', {}, function(profile) {     
        self.profile = new Profile(ko.toJS(profile));
        console.log(ko.toJSON(self.profile));

        // load the users requests
        $.getJSON('/request/load', {}, function(requests){
            var mappedRequests = $.map(requests, function(request) {
                return new Request(request);
            });
            self.requests = mappedRequests;
            console.log(ko.toJSON(self.requests));
        });         
    });
}

以下是我正在尝试应用的简单绑定

<h2 data-bind="text: profile.first_name"></h2>

<ul data-bind="foreach: requests">
    <li data-bind="text: title"></li>
</ul>

当然，我正在将文件准备好的

中的敲除绑定应用

  <script>
    $(document).ready(function() {
      // bind the ViewModel
      ko.applyBindings(new MasterViewModel());
    });
 </script>

Answer 1

你应该设置observables不要用新值覆盖它们。

您写道：

self.profile = new Profile(ko.toJS(profile));

你应该这样写：

self.profile(new Profile(ko.toJS(profile)));

为什么呢？因为这样，ko知道配置文件已更改，并且必须刷新视图。

同样的问题：

self.requests = mappedRequests;

应该是：

self.requests(mappedRequests);

Answer 2

您需要更新observable的值而不是它的引用。您还需要将配置文件值作为函数

进行访问

<h2 data-bind="text: profile().first_name">

检查这个小提琴http://jsfiddle.net/victorrseloy/qFnUC/1/

    var i = 0;

function Profile(){
    var self = this;
    this.first_name = ko.observable("profile"+(i++));
}

function ViewModel(){
    this.profile= ko.observable(new Profile());
    this.requests= ko.observableArray([{title:"t1"},{title:"t2"}]);
}


var viewModel = new ViewModel()

function changeReference(){

    viewModel.profile = new Profile();
    viewModel.requests = [{title:"t1"+i},{title:"t2"+i}];

}

function changeValue(){
   viewModel.profile(new Profile());
   viewModel.requests([{title:"t1"+i},{title:"t2"+i}]);
}

ko.applyBindings(viewModel)

HTML：

<h2 data-bind="text: profile().first_name"></h2>

<ul data-bind="foreach: requests">
    <li data-bind="text: title"></li>
</ul>
<a href="#" onclick="changeReference()">change reference</a>
<a href="#" onclick="changeValue()">change value</a>

Knockout JS绑定不使用简单视图模型输出值

2 个答案: