首页 文章

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

提问于
浏览 次
1

我正在尝试加载一个简单的视图模型，它有两个模型，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>
javascript ajax knockout.js

2 回答

  • 1

    您应该设置observable不使用新值覆盖它们 .

    你写了 ：

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

    你应该这样写：

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

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

    同样的问题：

    self.requests = mappedRequests;

    应该是：

    self.requests(mappedRequests);
    回复于
  • 0

    你需要更新observables的值而不是它的引用 . 您还需要将配置文件值作为函数访问

    <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>
    回复于

相关问题