knockout + partials + mvc +正确的绑定方式

时间:2014-08-29 13:37:26

标签: asp.net-mvc knockout.js partials

亲爱的程序员

我让自己变成了泡菜。我已经淘汰了2周了,我害怕我不明白它的基本想法。所以请对我温柔。

情况:

我有一个主视图布局页面/主页,使其变得简单。这里我有2列布局。 在患者列表框的左侧,点击一个后,您会看到处方下方的处方集。非常简单...

enter image description here

不介意这里的渲染人,这是错误的。只需使用此图片即可看到2个大部分。红色和黄色。

现在我让主人工作得很好,当我点击一个病人我想在屏幕的黄色部分加载一个特定的局部视图。点击处方一样,我想在黄色部分加载处方部分。

我得到了这两个编辑屏幕,但没有包含主人。这些页面看起来像这样:

@model  FysioNotes.WebMVC.Models.ViewModels.EditPatientViewModel

表格+绑定

@section scripts {

<script src="~/MyScripts/patientVm.js" />
<script>
    $(function () {
        ko.applyBindings(new editPatientVm(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model))));
    });

</script>

}

您看到我在这里使用razor来填充editPatientVm中的数据。 js文件看起来像这样:

var patientVm = function (data) ...
var editPatientVm = function (data) ...
var createPatientVm = function (data) ...

这与处方相同。 现在,当我尝试将处方部分加载到屏幕的黄色部分时,我尝试这样做。这可能是非常错误的......

-- this is at the bottom of the master view --
<script type="text/javascript">
    $(document).ready(function () {
$('#tablePrescriptions').on('click', 'tr', function (event) {
               var selectedId = $(this).data("prescriptionid"); 
    // this data gets filled without troubles
               $(this).addClass('selectedrow').siblings().removeClass('selectedrow');
               openDetail("prescription", selectedId);
            });

然后这个功能

    function openDetail(type, selectedId) {
        if (debug)
            alert(type + " : " + selectedId);

        var url = baseurl + "/Prescription/Edit?prescriptionId=" + selectedId;

        $("#mainContent").load(url);

        //CHECK THIS
        ko.cleanNode($("#mainContent")[0]);
        $("#mainContent").load(url, function () {
            //ko.applyBindings(new viewModel(), $("#mainContent")[0]);

            ko.applyBindings(new editPrescriptionVm(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(new FysioNotes.WebMVC.Models.ViewModels.EditPrescriptionViewModel(12836)))), document.getElementById("mainContent"));
        });

    }

就像你看到的那样,固定数字12836是完全错误的。但我想尝试一下,如果这样可行,那就行了。但显然我不能发送一个js var到razor,因为这是不可能的....所以这让我认为我做了一些完全错误的事情

主视图底部显示:

<script src="~/MyScripts/patientVm.js"></script>
<script src="~/MyScripts/prescriptionVm.js"></script>
<script>
    $(function () {
        ko.applyBindings(new masterVm(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model))));
    })

</script>

我想我需要将部分需要的视图模型放入我的主视图模型中吗?然后发送它但这意味着每个viewmodel都需要在master上。这不适合初始加载!我这样做似乎不对,但我以前错了......

请帮助:(

1 个答案:

答案 0 :(得分:0)

@section脚本无法在通过ajax检索的部分视图中工作...您必须在首先检索视图的代码之后在这些标记之间执行代码。 @section脚本保存在请求项中,并在呈现页面时呈现。但由于这是ajax,服务器已经很久了,它会考虑到本节之间定义的脚本