在 foreach 中使用 $data for 组件参数进行挖空

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

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

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

我没有意识到您在<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);
    }
});

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

我们之前在这里遇到过类似的情况。

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

但是有一个解决方法。如果使用组件绑定，则$data变量将按预期工作。例如

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

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

相关内容

最新更新

热门标签：