Question

在@section scripts{...}内调用div时出现问题。目前，它指出Uncaught Error: Unknown component 'product-chooser。

问题：如何从div中调用我的部分，以便将内容放在页面顶部附近？

给我提出问题的代码部分：

@section scripts{
    @Html.Partial("ProductChooserScript", Model)
}

查看： ProductSelector

<div id="productForm">
    @using(Html.BeginForm())
    {
        <div class="col-md-6">
            <div class="input-group" data-bind="visible: false, component: { name: 'product-chooser' , params: { value: TargetedProducts, available: AvailableProducts, selected: SelectedProducts }}"></div>
            @* Failing Here *@
            <div>
                @section scripts{
                @Html.Partial("ProductChooserScript", Model)
            }
            </div>
        </div>
    }
</div>

<script type="text/javascript">
    function ProductSelectionViewModel(data){
        var self = this;

        // additional javascript/knockout logic here...
    }

    $(function (){
        window.viewModel = new ProductSelectionViewModel(@Html.Json(Model));

        ko.applyBindings(window.viewModel, $("#productForm")[0])
    })
</script>

附加说明：

如果我移除div周围@section scripts{...}并将其放在页面底部，则会渲染部分，但部分会在页面底部呈现（不是所需的结果），我希望它能在顶部附近呈现。

请注意我做了研究......其他来源没有解决这个问题。

Answer 1

首先，您定义部分的视图代码中的位置与任何内容无关。换句话说，仅仅因为你在div中定义它并不意味着该部分的内容将最终在那里。只要布局调用RenderSection，就会呈现该部分。

其次，您只能在使用布局的布局或视图中定义部分。部分视图无法定义部分，因为部分视图不会引用布局。

Answer 2

经过进一步研究，我能够解决我的问题。错误发生在我的knockout上...我将@section scripts{...}移到了视图的底部，然后创建了一个div id productChooser。

之前，我的ko.components.register...附加了body，它正在页面底部呈现。将附加内容更改为productChooser后，会按预期呈现。

我的观点： ProductSelector

<div id="productForm">
    @using(Html.BeginForm())
    {
        <div class="col-md-6">
            <div class="input-group" data-bind="visible: false, component: { name: 'product-chooser' , params: { value: TargetedProducts, available: AvailableProducts, selected: SelectedProducts }}"></div>
            <div id="productChooser"></div>    
        </div>
    }
</div>

<script type="text/javascript">
    function ProductSelectionViewModel(data){
        var self = this;

        // additional javascript/knockout logic here...
    }

    $(function (){
        window.viewModel = new ProductSelectionViewModel(@Html.Json(Model));

        ko.applyBindings(window.viewModel, $("#productForm")[0])
    })
</script>
@section scripts{
    @Html.Partial("ProductChooserScript", Model)
}

<强> ProductChooserScript

<script type="text/javascript">
(function (){
     ko.components.register('product-chooser', {
    viewModel: {
        createViewModel: function (params) {
            var chooserModel = new ViewModel(params);
            var modalHtml = $('#product-chooser-template').html();
            $('#productChooser').append(modalHtml);
            var el = $('#MyModal')[0];
            ko.applyBindings(chooserModel, el);
            initializeControl(chooserModel);
            return chooserModel;
        }
    },
    template: $('#product-chooser-preview-template').html()
});
})();
</script>

在Div中引用@Section脚本

2 个答案: