2013-06-20 34 views
0

所以我使用require.js和knockout.js在一起。我有一个收集用户的简单页面。observableArray不会在UI中更新require.js

下面是代码:

CSHTML文件:

@section scripts{ 
    <script data-main="../Scripts/app/usermanagement/app.invite" src="../Scripts/lib/require.js"></script> 
} 
<div id="usermanagement-invite-view"> 
    <p>Enter all the users you would like to invite to this account. You will be able to set the permissions onces you have added them.</p> 
    <span data-bind="text: ko.toJSON($data)"></span> 
    <div data-bind="foreach: invitedUsers()"> 
     <div><span data-bind="text: firstName"></span></div> 
     <div><span data-bind="text: lastName"></span></div> 
     <div><span data-bind="text: emailAddress"></span></div> 
    </div> 
    <div> 
     <input type="text" placeholder="First Name" data-bind="text: firstName" class="input" /> 
     <input type="text" placeholder="Last Name" data-bind="text: lastName" class="input" /> 
     <input type="email" placeholder="EmailAddress" data-bind="text: emailAddress" class="input" /> 
     <input type="button" value="Invite" data-bind="click: invite" class="submit" /> 
    </div> 
</div> 

这里是app.invite.js

requirejs.config({ 
    "baseUrl": "../Scripts/app/usermanagement", 
    "paths": { 
     "app.invite": "app.invite", 
     "ko": "../../lib/knockout-2.2.1", 
     "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min", 
     "toastr": "../../lib/toastr" 
    } 
}); 

// Load the main app module to start the app 
require(["main.invite"], function (bs) { bs.run(); }); 

这里是main.invite.js:

define(['ko', 'inviteViewModel'], function (ko, inviteViewModel) { 
    var 
     run = function() { 
      var vm = new inviteViewModel(); 
      ko.applyBindings(vm, document.getElementById('#usermanagement-invite-view')); 
     }; 
    return { 
     run: run 
    }; 
}); 

这里是inviteViewModel :

define('inviteViewModel', ['jquery', 'ko', 'toastr', 'model.user'], function ($, ko, toastr, User) { 

    return function inviteViewModel() { 
     var self = this; 

     self.firstName = ko.observable(); 
     self.lastName = ko.observable(); 
     self.emailAddress = ko.observable(); 

     self.invitedUsers = ko.observableArray(); 

     self.invite = function() { 
      var newUser = new User(); 
      newUser.firstName(self.firstName()); 
      newUser.lastName(self.lastName()); 
      newUser.emailAddress(self.emailAddress()); 

      self.invitedUsers().push(newUser); 
      console.log(self.invitedUsers()); 


     }; 

    } 
}); 

出于某种原因,当我打电话邀请功能,代码显示了我添加的东西集合,但用户界面不会得到更新。这里是什么,当我做一个console.log。然而,这并不表明值是

Console Log

我在做什么错?

回答

2

您需要直接调用顺序上pushobservableArray以KO跟踪你的变化和更新UI,所以你不需要括号:

self.invitedUsers.push(newUser); 

也看到documentation:

流行,,移位,不印字,反转,排序,拼接

所有这些功能是当量ivalent到运行的底层阵列上的本地JavaScript 数组函数,然后通知听众 有关变化:

myObservableArray.push('Some new value')增加了一个新的项,以 数组的末尾

相关问题