我无法使用带有组件和要求的基因剔除3.2更新可观察到的数组。我可以在声明时将项目手动推入视图模型中的数组中,这没有问题,但是当通过ajax调用或通过硬编码按动按钮将其推入时,DOM不会更新。
调试时,我可以看到数组中有项目,但是DOM没有更新。任何帮助将不胜感激。
<!-- ko if: state() === 'home' -->
<template></template>
<!-- /ko -->
<table id="items">
<thead>
<tr>
<th>Category</th>
<th>Item</th>
<th>Cost</th>
</tr>
</thead>
<tbody data-bind="foreach: Items()">
<tr>
<td data-bind="text: CategoryName"></td>
<td data-bind="text: Name"></td>
<td data-bind="text: '£' + Cost"></td>
</tr>
</tbody>
</table>
var appStateViewModel = {
isRunning: ko.observable(false),
state: ko.observable('home'),
allowLog: false
};
// Configure requirejs
require.config({
paths: {
text: 'Scripts/text',
knockout: '//localhost:2222/Scripts/Plugins/knockout'
},
urlArgs: "bust=" + (new Date()).getTime()
});
// Register knockout components
ko.components.register('template', { require: './Modules/Template/Template' });
// Apply bindings for state
var scope = document.getElementById('app');
ko.applyBindings(appStateViewModel, scope);
define(['knockout', 'text!./Template.html'], function (ko, htmlString) {
function TemplateViewModel(params) {
var self = this;
self.Items = ko.observableArray();
$.getJSON("Items")
.done(function (response) {
$.each(response, function (i, item) {
self.Items.push({
Id: item.Id,
Name: item.Name,
Description: item.Description,
Cost: item.Cost,
CategoryName: item.CategoryName
});
});
})
.fail(function (listResponse, status, errorThrown) {
alert(errorThrown);
});
}
// Return component definition
return { viewModel: TemplateViewModel, template: htmlString };
});
我找到了解决方法。看来我没有正确设置要求。
解决方法:
require(["knockout", "jquery", "text"], function (ko) {
// Register knockout components
ko.components.register('template', { require: './Modules/Template/Template' });
// Apply bindings for state
var scope = document.getElementById('app');
ko.applyBindings(appStateViewModel, scope);
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句