KnockoutJS MVC 部分查看选中信息

Question

我正在尝试实现我的 HTML 页面的部分视图，我在其中扩大了屏幕上 QR 码的大小，以便用户在单击按钮时更容易看到showQRPanel.

HTML页数：

<div data-bind="using: DetailsArray">
    <table style="padding: 9px; border: 1px solid;" data-bind="foreach: DetailsArray">
        <tr style="border: 1px solid;">
            <th>Patient</th>
            <th>Age</th>
            <th>QR</th>
            <th>img</th>
            <th>Button</th>
        </tr>
        <tr>
            <td data-bind="text: patient"></td>
            <td data-bind="text: age"></td>
            <td data-bind="text: mobnum"></td>
            <!--ko if: mobnum-->
            <td><img style="width: 100px; height: 100px;" data-bind="attr: { 'src': '@Url.Action("QrGenerator", "Home")?mobnum_text=' + mobnum }" /></td>
            <td><button id="showQRPanel" data-bind="click: $root.ShowPanel">...</button></td>
            <!--/ko-->
        </tr>
    </table>

        <!--ko if: ShowPanel-->
        @Html.Partial("~/Views/Home/_QRPanel.cshtml")
        <!--/ko-->

</div>

局部视图：

<div style="background-color: slategrey; width: 53%;" data-bind="with: $root.DetailsArray">

    <h2>Phone Number:</h2>
    <img style="width: 100px; height: 100px;" data-bind="attr: { 'src': '@Url.Action("QrGenerator", "Home")?mobnum_text=' + mobnum }" />

</div>

视图模型：

var viewModel = {
    ShowPanel: ko.observable(false),

    DetailsArray: ko.observableArray([
        { patient: "niall", age: "13", mobnum: "0793983720"},
        { patient: "jacob", age: "13", mobnum: "07939837332"},
        { patient: "sam", age: "15", mobnum: ""},
    ])
};



ko.applyBindings(viewModel);

谢谢！

Answer 1

首先，我认为您不需要在顶部的 div 中绑定 using。请查看 using 绑定的文档 (https://knockoutjs.com/documentation/with-binding.html)。

其次，您的部分视图中的绑定不太正确。 img 正在尝试绑定到 mobnum，但您的视图模型上没有 mobnum 属性。相反，您的数组中的每一项都有一个，但是您没有告诉绑定它如何知道要使用哪一个。

第三，按钮上的点击处理程序调用 ShowPanel 方法。但是，ShowPanel 是一个可观察对象，因此当您调用它时，它所做的只是 return 它的值，点击处理程序会忽略它。

删除 HTML 页面顶部的 using: DetailsArray 后，试试这个：

视图模型：

var viewModel = {
    SelectedMobNum: ko.observable(),

    ShowPanel: function(item) {
        viewModel.SelectedMobNum(this.mobnum);
    },
    ClosePartialView: function() {
      viewModel.SelectedMobNum(null);
    },

    DetailsArray: ko.observableArray([
        { patient: "niall", age: "13", mobnum: "0793983720"},
        { patient: "jacob", age: "13", mobnum: "07939837332"},
        { patient: "sam", age: "15", mobnum: ""},
    ])
};

局部视图（注意到我删除了 with 绑定）：

<div data-bind="visible: SelectedMobNum">

    <h2>Phone Number:</h2>
    <img data-bind="attr: { 'src': '@Url.Action("QrGenerator", "Home")?mobnum_text=' + SelectedMobNum() }" />
    <button data-bind="click: ClosePartialView">Close</button>

</div>

KnockoutJS MVC 部分查看选中信息

KnockoutJS MVC Partial view selected information

html

asp.net

model-view-controller

knockout.js

partial-views