重用带有绑定敲除 JS 的局部视图

Question

在着陆页中，我将绑定应用于局部视图。 ("myModalSeeAllDrafts")

着陆页：

@Html.Partial("~/Views/Home/JumpStartYourJourney/_SeeAllDrafts.cshtml")

var journeyDrafts = {
                dataUrl: '@Url.Action("GetSeeAllDraftsData", "Home")',
                selectUrl: '@Url.Action("GetDraftJourney", "Home")',
                deleteUrl: '@Url.Action("DeleteDraftBooking", "Home")'
            };

 var journeyDraftsVM = new JourneyDraftsViewModel(journeyDrafts);
            ko.applyBindings(journeyDraftsVM, $("#myModalSeeAllDrafts")[0]);

我想从另一个角度重用部分

旅行者观点：

@Html.Partial("~/Views/Home/JumpStartYourJourney/_SeeAllDrafts.cshtml")

var url = {
            dataUrl: '@Url.Action("GetSeeAllDraftsData", "Home")',
            selectUrl: '@Url.Action("GetDraftJourney", "Home")',
            deleteUrl: '@Url.Action("DeleteDraftBooking", "Home")',
        };
        var journeyDraftsViewModel = new JourneyDraftsViewModel(url);
        ko.applyBindings(journeyDraftsViewModel, $("#myModalSeeAllDrafts")[0]);

我收到一个错误，未捕获的语法错误：您不能对同一元素多次应用绑定。是不是，你一到别的页面，那个视图的绑定就已经过期了？

请帮忙。

Answer 1

您必须将第二个绑定更改为此：$("#myModalSeeAllDrafts")[1]

但这不是一个好方法，因为您有 2 个或更多元素具有相同的 ID：您可以将 ID 作为参数发送到局部视图中包含元素。

@Html.Partial("_SeeAllDrafts", "id2")
@Html.Partial("_SeeAllDrafts", "id1")

部分：

@model string

<div id='@Model'>
    <span data-bind="text: name"></span>
</div>

然后将您的绑定更改为

@section scripts
{
    <script type="text/javascript">
        $(function () {
            var journeyDraftsViewModel = { name: "refan" };
            ko.applyBindings(journeyDraftsViewModel, document.getElementById('id1'));
            ko.applyBindings(journeyDraftsViewModel, document.getElementById('id2'));
        });
    </script>
}

--------------------或者--------------------

您可以使用具有不同 ID 的 div 包装您的部分：

<div id="id1">
    @Html.Partial("_SeeAllDrafts")
</div>

<div id="id2">
    @Html.Partial("_SeeAllDrafts")
</div>

$(function () {
     var journeyDraftsViewModel = { name: "refan" };
     ko.applyBindings(journeyDraftsViewModel, document.getElementById('id1'));
     ko.applyBindings(journeyDraftsViewModel, document.getElementById('id2'));
});

然后根据这个ids进行绑定

--------------------如果你没有任何其他绑定---------------- -----

您可以在文档准备好后对整个页面进行一次装订。

$(document).ready(function () {
    var journeyDraftsViewModel = new JourneyDraftsViewModel(url);
    ko.applyBindings(journeyDraftsViewModel);
});

重用带有绑定敲除 JS 的局部视图

Reusing the Partial View with binded knockout JS

knockout.js

view

partial