我有一个复杂对象的可观察数组。初始加载很好,所有预期的数据都很好。现在我正在将新项目发布到该数组。注意:可通过ASP.NET ajax web api调用加载可观察数组。
发布一个新项目可以正常保存到数据库,但我的DOM没有使用新项目更新,我不知道我错过了什么。
这是整个ViewModel
function ClientList() {
//data
var self = this;
self.initialized = ko.observable(false);
self.clients = ko.observableArray();
self.userId = ko.observable("");
self.name = ko.observable("");
self.logo = ko.observable("");
self.projects = ko.observableArray();
self.clientAddress = ko.observableArray();
self.addClient = function () {
var client = {
UserId: self.userId,
Name: self.name,
Logo: self.logo,
}
client = ko.toJSON(client);
lucidServer.addClient(client);
self.clients.push(client);
}.bind(self);
(function () {
$.ajax({
url: lucidServer.getClients(1),
success: function (data) {
ko.mapping.fromJS(data, {}, self.clients);
self.initialized(true);
}
});
})();
};
function IncompleteStoriesList() {
//data
var self = this;
self.initialized = ko.observable(false);
self.stories = ko.observableArray();
(function () {
$.ajax({
url: lucidServer.getIncompleteStory(1),
success: function (data) {
ko.mapping.fromJS(data, {}, self.stories);
self.initialized(true);
}
});
})();
};
function ViewModel() {
var self = this;
self.clientList = new ClientList();
self.storyList = new IncompleteStoriesList();
}
ko.applyBindings(new ViewModel());
以下是我正在进行POST的特定代码段(在ClientList()函数中)。
self.addClient = function () {
self.client = {
UserId: self.userId(),
Name: self.name(),
Logo: self.logo(),
}
//make client object to send to server
var client = ko.toJSON(self.client);
lucidServer.addClient(client);
//push the self.client to the observablearray of clients
self.clients.push(self.client);
}.bind(self);
我确认它是JSON,它位于客户端变量中,并且没有错误消息被抛出,所以我很困惑。添加项目并刷新整个页面后,它将显示在列表中。
编辑:这是相关的html:
<form data-bind="submit: clientList.addClient">
<div>
<label>userId</label>
<input type="text" data-bind="value: clientList.userId" />
</div>
<div>
<label>name</label>
<input type="text" data-bind="value: clientList.name" />
</div>
<div>
<label>logo</label>
<input type="text" data-bind="value: clientList.logo" />
</div>
<button type="submit">Add</button>
</form>
<!-- ko ifnot: clientList.initialized -->
<span>Loading...</span>
<!-- /ko -->
<ul data-bind="template:{name: 'clientList', foreach:clientList.clients}">
</ul>
外部模板如下所示:
<div id="clientListOutput">
<li><span data-bind="text: name"></span>
<div data-bind="template: {foreach: clientAddress}">
<span data-bind="text: city"></span>
<span data-bind="text: state"></span>
</div>
<hr />
<ul data-bind="template: {foreach: projects}">
<li>
<span data-bind="text: name"></span>
<span data-bind="text: summary"></span>
<span data-bind="text: description"></span>
</li>
</ul>
</li>
答案 0 :(得分:1)
我非常认可你的HTML中有拼写错误。这是一个使用ko.observablearray
的工作示例HTML:
<form data-bind="submit: addItem">
prop1: <input data-bind='value: prop1, valueUpdate: "afterkeydown"' />
prop2: <input data-bind='value: prop2, valueUpdate: "afterkeydown"' />
<button type="submit">Add</button>
<p>Your items:</p>
<div data-bind="foreach: items">
<span data-bind="text: prop1"></span>   -  
<span data-bind="text: prop2"></span>
<br />
</div>
</form>
JS:
var SimpleListModel = function() {
this.items = ko.observableArray();
this.prop1 = ko.observable("");
this.prop2 = ko.observable("");
this.addItem = function() {
this.items.push({prop1:this.prop1, prop2: this.prop2});
}.bind(this); // Ensure that "this" is always this view model
};
ko.applyBindings(new SimpleListModel());
我想你也可能忘记应用绑定......
修改强>
我为发布错误的小提琴而道歉,现在正好。
self.addClient = function () {
var client = {
UserId: self.userId(),
Name: self.name(),
Logo: self.logo()
}
lucidServer.addClient(ko.toJSON(client));
self.clients.push(client);
}.bind(self);
您添加括号以获取可观察的当前静态值