Javascript 淘汰3.2 amd组件未更新可观测值

我很难使用3.2版本的组件和要求更新可观测阵列。我可以在声明时手动将项目推送到视图模型中的数组中，这没有问题，但是当通过ajax调用或通过硬编码的按钮推送到数组中时，DOM不会更新

调试时，我可以看到数组中有项，但是DOM没有更新。任何帮助都将不胜感激

Default.html Template.js

---

我找到了解决办法。看来我没有正确设置需求

修复方法：

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);

});

---

你能像这样用小提琴演奏吗？在这种情况下不需要require.js。由于某些浏览器中已经有了

模板

元素，我将名称更改为

我的模板

。我无法让js fiddle支持我正在使用的无容器控制流。我更新了fiddle。这能显示流程吗？谢谢你的帮助。我无法让JSFIDLE支持我用来加载控件的无容器语法。在您的示例中，有一件事是您正在应用绑定。我并没有明确地这样做，因为knockout的新组件文档中的所有示例都没有任何applyBindings调用。没有这个电话，他们似乎在一定程度上起了作用。当我使用amd模式时，我不确定我将把这个apply bindings调用放在哪里，特别是因为它的作用域仅限于这个组件。有什么想法吗？谢谢：）谢谢，刚收到你的最新消息。我来看看：）

<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);

});