Question

我开始玩组件，但我正在努力使用这个简单的代码。

当我在函数viewModel(params)中放置一个断点时，对象params.data是我的视图模型viewModelHelloWorld，而我希望它是我的数组的一个项目。我做错了什么？

HTML：

<body>
    Hello <span data-bind="text:name"></span>

    <table data-bind="foreach: arrays">
        <test-component params="data: $data"></test-component>
    </table>    

    <script type="text/html" id="line-items">
        <tr>
             <td data-bind="text: Key"></td>
        </tr>
    </script>

    <script type="text/javascript" src="knockout-3.4.0.js"></script>
    <script type="text/javascript" src="presentation_knockout.js"></script>
</body>

javascript

(function() {
    function viewModelHelloWorld()
    {
        var self = this;
        self.name = ko.observable("foo");       
        self.arrays = [ {Key:"1"}, {Key:"2"} ];
    }

    function viewModel(params)
    {
        var self = this;
        self.Key = ko.observable(params.data.Key);
    }

    ko.components.register('test-component', {
        viewModel: viewModel,
        template: { element: 'line-items' }
    });

    ko.applyBindings(new viewModelHelloWorld());
}());

Answer 1

我没有意识到您在<table>元素中使用自定义标记。显然浏览器正在推出它，因为它不是一个有效的孩子。浏览器实际上是这样做的：

<test-component params="data: $data"></test-component>
<table data-bind="foreach: arrays">
</table>

您必须确保插入有效标签。不妨这样做：

<table data-bind="foreach: arrays">
    <tr data-bind="component: { name: 'test-component', params: $data }"></tr>
</table>

<script type="text/html" id="line-items">
    <td data-bind="text: Key"></td>
</script>

使用您的组件：

ko.components.register('test-component', {
    template: { element: 'line-items' },
    viewModel: function viewModel(params) {
        this.Key = ko.observable(params.Key);
    }
});

您仍然可以为组件中的每一行添加更多列。或者更好的是，使整个表成为一个组件并以这种方式构建您的视图。这将是最有意义的。

我们之前遇到类似情况here。

Answer 2

好吧，我很难被这个人困住。我尝试了你的例子并得到了相同的结果。因此，解析自定义元素与解析数据绑定肯定有所不同。

但是有一个解决方法。如果您使用component binding，/Applications/Steam.app/变量将按预期工作。 e.g。

$data

我感觉foreach中的隐式模板在foreach应用之前被解析，所以它在主视图模型上下文中解析，ergo viewModel === $ data，而不是在foreach循环中解析。但这只是一种理论。

在foreach

2 个答案: